jquery-file-upload - jquery 文件上传 - 如何在“basic plus”演示中处理整个队列

Question

鉴于以下演示：

jQuery File Upload Basic Plus 演示

根据演示，我在一个项目中工作，但我想删除每个图像上的“上传”按钮，并在顶部添加一个“全部上传”按钮。对于我的一生，我无法弄清楚如何去做，而且文档很薄......

我试图创建一个文件上传对象的句柄，例如var fileUpload = $('#fileupload').fileupload({并调用类似 fileUpload.send(); 但我只是得到“对象不包含方法'发送'”

Answer 1

工作解决方案在这里：Start Upload all in jquery file upload blueimp

关键是取消绑定“完成”选项中的点击事件，而不是像这里的其他文章所建议的那样在“添加”选项中。

done: function (e, data) {
        $("#uploadBtn").off('click')
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    },
add: function (e, data) {
        $("#uploadBtn").on('click',function () {
            data.submit();
        });
    }

另一种选择是给单个上传按钮一个类，通过将它们的 css 显示设置为 none 并将它们的点击绑定到 upload_all 点击来隐藏它们：

//Put this button code next to your button (or span mimicking button) that adds files to the queue.
<button id="upload_all" type="submit" class="btn btn-primary start">
    <i class="glyphicon glyphicon-upload"></i>
    <span>Start upload</span>
</button>

//Give your buttons a class and set their display to none.
var uploadButton = $('<button/>', { 
                       class:"upload", 
                       style:"display:none" 
                   })
                   .on('click', function () {
                        var $this = $(this),
                        data = $this.data();
                        data.submit().always(function () {      
                            $this.remove();
                        });
                   });

//Bind their click to the click of your upload_all button. 
$('#upload_all').on('click', function() {
     $('.upload').click();
});

Answer 2

您可以将所有数据推送到一个数组中，并让您的外部按钮调用一个循环遍历数组的函数并在每个上调用 .submit() 。

var fileDataArray = [];

// Inside "add" event
fileDataArray.push(data);

// Inside your onClick function for your button
for (var i = 0; i < fileDataArray.length; i++) {
    var data = fileDataArray[i];
    data.submit();
}