Использование PHP или jQuery для отправки динамически сгенерированного файла
Я пытаюсь взаимодействовать с «API» в другой компании. Их API на самом деле представляет собой форму загрузки файла, которая запрашивает файл CSV. Это стандартная HTML-форма с таким элементом:
<input type="file" id="inputFileUploadFile" name="UploadFile">
У меня есть страница, где пользователь может просматривать набор данных таблицы. Я ищу способ иметь решение с одной кнопкой, где пользователь может посмотреть на данные таблицы и отправить его в виде файла к этому так называемому API.
Генерация данных в формате CSV достаточно проста. Вопрос, в частности, заключается в том, как мне затем передать эти данные в элемент формы и отправить их?
Я могу использовать jQuery для манипуляции и отправки скрытой HTML-формы, или я могу использовать PHP для прямой отправки формы. Ответ в любом формате работает.
Решение
Одним из подходов является использование класса 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
})
Другие решения
Благодаря Яшвиру Сингху я смог собрать все кусочки вместе. Вот версия 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.');
}
});