通过程序从多个输入字段上传多个文件-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插件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});
    });
}
};