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

Uploading multiple files from multiple input fields programatically - blueimp jquery fileupload

提问by JuanLM

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:

我正在尝试使用 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?

• 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() 可以绑定新的动态添加的输入？

The file upload form I'm using, has multiple dynamically added file input fields. As an example, after adding 3 fields:

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

I can successfully upload files from this fields using the following JS code:

我可以使用以下 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});
        });
    }
};

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:

正如您在 '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"

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!

谢谢！

采纳答案by JuanLM

Solved after reading this post: Uploading multiple files asynchronously by blueimp jquery-fileupload

阅读这篇文章后解决：blueimp jquery-fileupload asynchronously Uploading multiple files

All it was needed was to save the input field name into a 'paramNames' variable to send it alongside the 'filesList' variable.

所需要做的就是将输入字段名称保存到“paramNames”变量中，以便与“filesList”变量一起发送。

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});
    });
}
};

回答by Mohd Abdul Mujib

It seems you have to manually add the array keys,

看来您必须手动添加数组键，

Something roughly like...

有点像……

        add: function (e, data) {
            for (var i = 0; i < data.files.length; i++) {
                filesList['files'+ i].push(data.files[i]);
            }