PHPまたはjQueryを使用して動的に生成されたファイルを送信する

Question

私は他社の「API」とやりとりしようとしています。 APIは実際にはCSVファイルを要求するファイルアップロードフォームです。このような要素を持つ標準HTMLフォームです。

<input type="file" id="inputFileUploadFile" name="UploadFile"> 

私は、ユーザーがテーブルデータのセットを表示できるページを持っています。私は、ユーザーがテーブルのデータを見ることができ、というファイルを、このいわゆるAPIにファイルとして送信するワンボタンソリューションを提供する方法を探しています。

データをCSV形式で生成するのは簡単です。質問は、具体的には、フォームデータにそのデータを取得して提出する方法です。

jQueryを使用して非表示のHTMLフォームを操作して送信することも、PHPを使用して直接フォームを送信することもできます。いずれの形式の回答も有効です。

Answer 1

1つのアプローチは、FormDataクラスを使用することです。以下にサンプルコードを示します。あなたがなどYashveerシンへ

 --- add enctype to form tag---- 
     <form id="upload_form" enctype="multipart/form-data"> 

     -- on submit create a new object assing key value pairs and post it . 

     var formData = new FormData($('#upload_form')[0]); 

     formData.append('key1', 'val1'); 
     formData.append('key2', 'val2'); 
     // Main magic with files here 
     formData.append('image', $('input[type=file]')[0].files[0]); 


     $.ajax({ 
      url: 'Your url here', 
      data: formData, 
      type: 'POST', 
      // THIS MUST BE DONE FOR FILE UPLOADING 
      contentType: false, 
      processData: false, 
      // ... Other options like success and etc 
     }) 

Answer 2

感謝をクリックし、ボタン上のポストを呼び出しているときは、関数の中でこれを呼び出す必要があり、私は一緒にすべてのピースを置くことができました。

//first, create a Blob object. Assume that variable myCSV has our CSV data as a string 
//The Blob constructor requires an array, so place in brackets []. 
var myblob = new Blob([myCSV], {type: 'text/csv'}); 

//Create a new FormData object. 
var myFD = new FormData(); 
//Add our file (the blob) to it. 
myFD.append('htmlFormName', myblob, 'someFileName.csv'); 
//We can also append other fields if necessary. 
myFD.append('inputName', 'inputValue'); 

//If we're using jQuery to send the form... 
$.ajax({ 
    url: 'http://remotewebsite.com/formhandler.php', 
    type: 'POST', 
    data: myFD, 
    processData: false, // <-- important! 
    contentType: false, // <-- important! 
    success: function(data) { 
     console.log('Posted successfully.'); 
    } 
});