使用 PHP 或 jQuery 提交动态生成的文件
Using PHP or jQuery to submit a dynamically generated file
我正在尝试与另一家公司的 "API" 互动。他们的 API 实际上是一个要求 CSV 文件的文件上传表单。这是一个标准的 HTML 形式,其中包含如下元素:
<input type="file" id="inputFileUploadFile" name="UploadFile">
我有一个页面,用户可以在其中查看一组 table 数据。我正在寻找一种方法来获得一键式解决方案,用户可以在其中查看 table 数据并 将其作为文件 提交给这个所谓的 API.
生成 CSV 格式的数据非常简单。具体而言,问题是如何将该数据放入表单元素并提交?
我可以使用 jQuery 操作并提交隐藏的 HTML 表单,或者我可以使用 PHP 直接提交表单。两种格式的答案都有效。
一种方法是使用 FormData Class。下面找到一个示例代码。当您在单击按钮时调用 post 等时,您需要在函数内部调用它。
--- 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
})
多亏了 Yashveer Singh,我才能够将所有的部分拼凑起来。这是 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.');
}
});
我正在尝试与另一家公司的 "API" 互动。他们的 API 实际上是一个要求 CSV 文件的文件上传表单。这是一个标准的 HTML 形式,其中包含如下元素:
<input type="file" id="inputFileUploadFile" name="UploadFile">
我有一个页面,用户可以在其中查看一组 table 数据。我正在寻找一种方法来获得一键式解决方案,用户可以在其中查看 table 数据并 将其作为文件 提交给这个所谓的 API.
生成 CSV 格式的数据非常简单。具体而言,问题是如何将该数据放入表单元素并提交?
我可以使用 jQuery 操作并提交隐藏的 HTML 表单,或者我可以使用 PHP 直接提交表单。两种格式的答案都有效。
一种方法是使用 FormData Class。下面找到一个示例代码。当您在单击按钮时调用 post 等时,您需要在函数内部调用它。
--- 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
})
多亏了 Yashveer Singh,我才能够将所有的部分拼凑起来。这是 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.');
}
});