以编程方式从多个输入字段上传多个文件 - blueimp jquery fileupload [英] Uploading multiple files from multiple input fields programatically - blueimp jquery fileupload
问题描述
我试图使用blueimp / jQuery-File-Upload插件通过PHP上传处理程序将图像存储在服务器中。我一直在关注这个帖子，以使其工作：
- https://github.com/blueimp/jQuery-File-Upload/wiki/API
- https：// github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form
- 以一种形式以编程方式发送多个文件输入字段
- BlueImp Plugin jQuery的文件上传：如何使用fileInput选项，使fileupload（）可以绑定新的动态添加的输入？
文件上传f orm我正在使用，有多个动态添加的文件输入字段。例如，添加3个字段后：
< form id =entry_formclass =entry-formrole = 形式 >
< div class =entry>
...
< input type =fileclass =file-uploadname =files0 []multiple>
...
< / div>
< div class =entry>
...
< input type =fileclass =file-uploadname =files1 []multiple>
...
< / div>
< div class =entry>
...
< input type =fileclass =file-uploadname =files2 []multiple>
...
< / div>
< / form>
< div class =col-xs-6 col-sm-4>
< button id =save_btnclass =btn btn-lg btn-block>保存< /按钮>
< / div>
我可以使用以下JS代码成功地从这个字段上传文件：
var imageUpload = {
init：function（selector，context，options）{
selector = selector || '。上传文件';
context = context || $（进入）;
var filesList = [];
var url = site_url +'/ doUpload';
$ b $（选择器）.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;
} $ （'change'，function（）{
$（this）.fileupload（'add'，{
fileInput：$（selector）
}）;
}）;点击（功能（e）{
e.preventDefault（）;
$（选择器）.fileupload（'发送'，{files：filesList}）;
}）;
}
};
正如您在'add：'事件回调和'send' ，我将一个POST中的所有文件发送到服务器，这是预期的功能。
我的问题是，$ _FILES服务器端变量以如下方式到达服务器：
$ _ FILES数组[1]
[files0] array [1]
[name] array [1]
[0] stringCollapse.png
[1] stringExpand.png
[2] stringMap.jpg
通过这种方式，不涉及哪个图像被添加到哪个输入。所以，我需要到服务器是这样的：
$ $ p $ $ FILES array [3]
[files0] array [1]
[name] array [1]
[0] stringCollapse.png
[files1] array [1]
[name]数组[1]
[0]字符串Expand.png
[文件2]数组[1]
[名称]数组[1]
[0]字符串 jpg
我一直在寻找这个解决方案一段时间，还没有达到预期结果。您可以帮我吗？
谢谢！
阅读本文：通过blueimp异步上传多个文件jquery-fileupload
所有需要的是将输入字段名称保存到paramNames变量中，并将其与'filesList'变量一起发送。
更新后的工作代码：
pre $ var $ image $ {$ b $ init：function（selector，上下文，选项）{
选择器=选择器|| '。上传文件';
context = context || $（。entry_form）;
var filesList = []，
paramNames = [];
var url = site_url +'/ doUpload';
$ b $（选择器，上下文）.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;
$ }
}）;
$（'＃save_btn'）。click（function（e）{
e.preventDefault（）;
$（selector，context）.fileupload（'send' {files：filesList，paramName：paramNames}）;
}）;
}
};
I'm trying to use the blueimp/jQuery-File-Upload plugin to store images in a server via a PHP uploads handler. I've been following this posts in order to make it work:
- https://github.com/blueimp/jQuery-File-Upload/wiki/API
- https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form
- Sending multiple file input fields programmatically in one form
- BlueImp Plugin jQuery File Upload : How to use the fileInput option so that fileupload() can bind new dynamically added inputs?
The file upload form I'm using, has multiple dynamically added file input fields. As an example, after adding 3 fields:
<form id="entry_form" class="entry-form" role="form">
<div class="entry">
...
<input type="file" class="file-upload" name="files0[]" multiple>
...
</div>
<div class="entry">
...
<input type="file" class="file-upload" name="files1[]" multiple>
...
</div>
<div class="entry">
...
<input type="file" class="file-upload" name="files2[]" multiple>
...
</div>
</form>
<div class="col-xs-6 col-sm-4">
<button id="save_btn" class="btn btn-lg btn-block">Save</button>
</div>
I can successfully upload files from this fields using the following JS code:
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});
});
}
};
As you can see in the 'add:' event callback and the 'send' method near the end, I'm sending all files in one POST to the server, this is the intended functionality. My problem is that the $_FILES server side variable is reaching the server in the following way:
$_FILES array[1]
[files0] array[1]
[name] array[1]
[0] string "Collapse.png"
[1] string "Expand.png"
[2] string "Map.jpg"
In this way, I can't relate which image was added to which input. So, what I'd need to get to the server is something like this:
$_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"
I have been looking for a solution to this for a while and haven't reached the desired result. Can you help me please?
Thanks!
Solved after reading this post: Uploading multiple files asynchronously by blueimp jquery-fileupload
All it was needed was to save the input field name into a 'paramNames' variable to send it alongside the 'filesList' variable.
Updated working code:
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});
});
}
};
这篇关于以编程方式从多个输入字段上传多个文件 - blueimp jquery fileupload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
