jquery - Blueimp 文件上传 : file is not deleting correctly from queue

Question

我有以下 blueimp 文件上传代码:

.on('fileuploadadd', function (e, data) {
   data.context = $('<div/>').appendTo('#FilesListThumb');
   $.each(data.files, function (index, file) {
         var node = $("<div><h6 fileId="+index+">X</h6></div>").addClass("thumbnail-ib");
         node.appendTo(data.context);
         node.find("h6").click(function(){
              data.files.splice($(this).attr("fileId"),1);
              node.remove();
         });
 });

当我点击h6时，有时它会从队列中删除文件，有时却不会。为什么？下一个问题是如何从队列中删除所有文件？

Answer 1

我建议您使用递增的全局变量而不是索引值:

var globalVariable = 0; // To be declare in a global context

.on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('#FilesListThumb');
    $.each(data.files, function (index, file) {
        globalVariable = globalVariable + 1;
        var node = $("<div><h6 fileId=" + globalVariable + ">X</h6></div>").addClass("thumbnail-ib");
        file.fileId = globalVariable; // Add the same id to the file
        node.appendTo(data.context);
        node.find("h6").click(function(){
            $.each(data.files, function (index, file) {
                if(file.fileId == $(this).attr("fileId"){
                     data.files.splice(index, 1);
                     return false; // Break the loop
            };
            node.remove();
        });
    });
});

要从队列中删除文件，您可以查看以下问题(我喜欢 tanguy_k 的答案):How do I empty an array in JavaScript?并将其应用到 data.files 数组。