以編程方式從多個輸入字段上載多個文件-Blueimp jQuery FileUpload

Question

我正在嘗試使用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 File Upload：如何使用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"

一段時間以來，我一直在尋找解決方案，但尚未達到期望的結果。 你能幫我嗎？

謝謝！

Answer 1

看來您必須手動添加陣列鍵，

大概像...

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

Answer 2

閱讀此文章后已解決： 通過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});
    });
}
};