以编程方式从多个输入字段上载多个文件 – blueimp jquery fileupload

我正在尝试使用blueimp / jQuery-File-Upload插件通过PHP上传处理程序将图像存储在服务器中。 我一直在关注这些post，以使其工作：

• https://github.com/blueimp/jQuery-File-Upload/wiki/API
• https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form
• 以一种forms以编程方式发送多个文件输入字段
• BlueImp插件jQuery文件上传：如何使用fileInput选项，以便fileupload（）可以绑定新动态添加的输入？

我正在使用的文件上传表单，有多个动态添加的文件输入字段。 例如，添加3个字段后：

 
 ...  ... 
 
 ...  ... 
 
 ...  ... 
 
 
 Save  

我可以使用以下JS代码从这些字段成功上传文件：

 var imageUpload = { init: function (selector, context, options) { selector = selector || '.file-upload'; context = context || $('.entry'); var filesList = []; var url = site_url + '/doUpload'; $(selector).fileupload(options || { url: url, type: 'POST', dataType: 'json', autoUpload: false, singleFileUploads: false, formData: {}, add: function (e, data) { for (var i = 0; i < data.files.length; i++) { filesList.push(data.files[i]); } return false; } }).on('change', function () { $(this).fileupload('add', { fileInput: $(selector) }); }); $('#save_btn').click(function (e) { e.preventDefault(); $(selector).fileupload('send', {files: filesList}); }); } }; 

正如您在’add：’事件回调和接近结尾的’send’方法中所看到的，我将一个POST中的所有文件发送到服务器，这是预期的function。 我的问题是$ _FILES服务器端变量以下列方式到达服务器：

 $_FILES array[1] [files0] array[1] [name] array[1] [0] string "Collapse.png" [1] string "Expand.png" [2] string "Map.jpg" 

通过这种方式，我无法将哪个图像添加到哪个输入。 那么，我需要到服务器的是这样的：

 $_FILES array[3] [files0] array[1] [name] array[1] [0] string "Collapse.png" [files1] array[1] [name] array[1] [0] string "Expand.png" [files2] array[1] [name] array[1] [0] string "Map.jpg" 

我一直在寻找解决方案，但尚未达到预期的效果。 你能帮我吗？

谢谢！

Answer 1

看来你必须手动添加数组键，

大致像…的东西

  add: function (e, data) { for (var i = 0; i < data.files.length; i++) { filesList['files'+ i].push(data.files[i]); } 

Answer 2

阅读本文后解决： blueimp jquery-fileupload异步上传多个文件

所需要的只是将输入字段名称保存到’paramNames’变量中，以将其与’filesList’变量一起发送。

更新的工作代码：

 var imageUpload = { init: function (selector, context, options) { selector = selector || '.file-upload'; context = context || $('.entry_form'); var filesList = [], paramNames = []; var url = site_url + '/doUpload'; $(selector, context).fileupload(options || { url: url, type: 'POST', dataType: 'json', autoUpload: false, singleFileUploads: false, add: function (e, data) { for (var i = 0; i < data.files.length; i++) { filesList.push(data.files[i]); paramNames.push(e.delegatedEvent.target.name); } return false; }, change: function (e, data) { }, done: function (e, data) { } }); $('#save_btn').click(function (e) { e.preventDefault(); $(selector, context).fileupload('send', {files:filesList, paramName: paramNames}); }); } };