Использование PHP или jQuery для отправки динамически сгенерированного файла

Question

Я пытаюсь взаимодействовать с «API» в другой компании. Их API - фактически форма загрузки файла, которая запрашивает файл CSV. Это стандартная форма HTML с таким элементом:

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

У меня есть страница, где пользователь может просмотреть набор данных таблицы. Я ищу способ получить одноконтактное решение, в котором пользователь может посмотреть данные таблицы, а представляет его как файл для этого так называемого API.

Генерировать данные в формате CSV достаточно просто. Вопрос, в частности, в том, как я могу получить эти данные в элемент формы и отправить его?

Я могу либо использовать jQuery для управления и отправки скрытой формы HTML, либо я могу использовать PHP для отправки формы напрямую. Ответ в любом формате работает.

Answer 1

Один из подходов заключается в использовании класса FormData. Ниже приведен пример кода. Вы должны вызвать это внутри функции, когда вы вызываете почту на кнопку мыши и т.д.

 --- 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

Благодаря Yashveer Сингх, я был в состоянии поставить все куски вместе. Вот JQuery/JavaScript версии:

//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.'); 
    } 
});