Question

我正在使用jQuery文件上传插件here来上传文件。

对于添加的每个文件，我在表格中生成一个带有隐藏按钮的行（这是该行中每个文件的单个上传按钮）和另一个用于删除文件的按钮。

我的代码如下：

   var addedFiles = 0;
    var uploadedFiles = 0;

    $('#uploadFile').fileupload({
        replaceFileInput: false,
        singleFileUploads: true,
        autoUpload: false,
        add: function (event, data) {
            $.each(data.files, function (index, file) {
                data.url = 'myUrl';
                data.type = 'POST';
                data.context = $('<tr><td><strong>Selected File : </strong>' + file.name + '</td><td><button name=singleuploadFile type="button" class="hidden">' +
                        '</button></td><td><button id=' + file.name + ' name=removeFile type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove-circle">' +
                        '</span>Remove File</button></td></tr>')
                    .appendTo('#files');

                $('button[name="singleUploadFile"]').click(function () {
                    if (data.files.length > 0) {
                        data.submit();
                        addedFiles += 1;
                    }
                });

                $('button[name="removeFile"]').on("click", function () {
                    var fileToRemoveId = this.id;
                    if (fileToRemoveId == data.files[0].name) {
                        data.files.splice(0, 1);
                        $(this).closest('tr').remove();
                    }
                });
            });
        },
        done: function () {
            uploadedFiles += 1;

            if (addedFiles == uploadedFiles) {
                alert("All Files Uploaded");
                addedFiles = 0;
                uploadedFiles = 0;
            }
        }
    });

    $('#uploadAllFiles').on("click", function () {
        $('button[name="singleUploadFile"]').click();
    });

因此，您可以看到上传文件的每个单独按钮的名称为singleUploadFile但该按钮是隐藏的 - 我不希望用户单独上传文件。但是我有一个名为Upload All Files的按钮，当点击时我会触发任何名为= singleuploadFile的按钮的click事件。

此功能可用，我的文件上传。问题是我对完成功能的警报。在singleFileUpload的click事件中，我有一个名为addedFiles的变量，每次触发此事件时，该变量都会增加。每次文件成功上传时都会调用done函数，因此我还有一个名为uploadedFiles的变量 - 一旦它们相等，我知道所有文件都已上传，所以我可以将它显示给用户。如果我有一个文件并且使用1个隐藏的singleFileUpload按钮创建一个文件，则此方法有效。 addedFiles变量设置为1，当点击完成函数时，uploadFiles变量为1，警报将触发。

然而，当我有2个文件 - singleFileUpload处理程序被命中3次 - 因此addedFiles变量为3 - 完成的函数按预期命中两次，因此uploadedFiles变量为2所以我的警报不会触发。对于3个文件 - singleFileUpload事件被命中6次。 4个文件被点击10次，5个文件被点击15次。

无法弄清楚为什么当我有更多的那一行时，为什么click all按钮会触发singleUploadfile按钮不正确的次数？

Answer 1

试试这个更改此事件绑定

$('button[name="singleUploadFile"]').click(function (){// Do Stuff}

到

$(document).on('click','button[name="singleUploadFile"]', function (){// Do stuff});

我认为错误是，您将事件绑定到具有[name="singleUploadFile"]的按钮到单击事件，然后页面加载时页面中已有的dom元素被绑定到此事件两次，因此只需单击一次，事件就会被触发超过一次。

你应该做的是

修改此代码

$('button[name="singleUploadFile"]').click(function () {
                if (data.files.length > 0) {
                    data.submit();
                    addedFiles += 1;
                }
            });

            $('button[name="removeFile"]').on("click", function () {
                var fileToRemoveId = this.id;
                if (fileToRemoveId == data.files[0].name) {
                    data.files.splice(0, 1);
                    $(this).closest('tr').remove();
                }
            });

以便所有事件都绑定到文档，这样只有在事件触发时才会执行一个函数。

Answer 2

以下代码将事件绑定到名称为＆＃34; singleUploadFile＆＃34;的所有按钮。

$('button[name="singleUploadFile"]').click(function () {
   if (data.files.length > 0) {
       data.submit();
       addedFiles += 1;
   }
});

但是你希望它将事件绑定到新添加的按钮（而不是绑定已绑定的按钮）。

执行以下操作：

data.context.find('button[name="singleUploadFile"]').click(function () {
   if (data.files.length > 0) {
       data.submit();
       addedFiles += 1;
   }
});

按钮上的点击事件有奇怪的行为吗？

2 个答案: