我正在尝试使用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插件jQuery文件上传:如何使用fileInput选项,使fileupload()可以绑定新的动态添加的输入
我使用的文件上传表单有多个动态添加的文件输入字段。例如,添加3个字段后:
<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>
我可以使用以下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中将所有文件发送到服务器,这就是预期的功能。我的问题是$_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"
我已经为此寻找了一段时间的解决方案,但还没有达到预期的结果。你能帮我吗?
谢谢!
似乎必须手动添加数组键,
大致像。。。
add: function (e, data) {
for (var i = 0; i < data.files.length; i++) {
filesList['files'+ i].push(data.files[i]);
}
阅读本文后解决:通过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});
});
}
};