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

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

Blueimp文件上传：文件未从队列中正确删除

1 个答案: