我正在尝试使用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
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?
我正在使用的文件上传表单具有多个动态添加的文件输入字段。例如,添加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]);
}
jQuery ajax发布电子邮件字段 - javascript我不确定为什么我无法发布电子邮件字段的内容,这是我的代码。<html> <head> <title></title> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> </head>…
jQuery Ajax上传文件php即使没有内容也接收数组 - javascript它正在工作,但是在每次提交时,我什至都收到一个数组,甚至没有将文件添加到文件输入(多文件输入) postData = new FormData(this); $.ajax({ url: "/url", type: "POST", data: postData, cache: false, contentType: fa…
jQuery val函数在隐藏字段上不起作用? - javascript这是我的HTML代码:<div style='display:none;' id='allformid'> <div> <form action='#'> <input type='text' name='name' …
jQuery C#中的数据集值 - javascript我在其中一页中,URL包含查询字符串值。 QSecID = 164&QTempId = 55&QSecName = New%20Temp%20Bt当页面加载它们并尝试获取值时,它可以正常工作。$(document).ready(function() { function getUrlParameter(name) { name = name.replace…
如何用jQuery隐藏模态? - javascript纽扣<button type="button" class="btn" onclick="CountClass()" runat="server" data-toggle="modal" data-target="#inlineForm1…