gpt4 book ai didi

javascript - 以编程方式从多个输入字段上传多个文件 - blueimp jquery fileupload

转载 作者:行者123 更新时间:2023-12-01 05:43:37 25 4
gpt4 key购买 nike

我正在尝试使用 blueimp/jQuery-File-Upload 插件通过 PHP 上传处理程序将图像存储在服务器中。我一直在关注这篇文章以使其发挥作用:

我正在使用的文件上传表单具有多个动态添加的文件输入字段。例如,添加 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]);
}

关于javascript - 以编程方式从多个输入字段上传多个文件 - blueimp jquery fileupload,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29155697/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com