Question

我正在使用jQuery文件上传插件的基本版本-> https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

我试图通过单击提交按钮而不是选择文件时的默认提交来触发文件上传。为此，我将autoUpload选项设置为false（https://github.com/blueimp/jQuery-File-Upload/wiki/Options#autoupload），并设置了add回调（https://github.com/blueimp/jQuery-File-Upload/wiki/Options#add）。

首次上传文件时，一切都变得很完美，单击提交按钮即可上传文件。但是，第二次上传时，submit上的click事件处理程序将触发两次，并上传前一个文件以及上传当前文件。

文件上传代码：

$('#create-image').fileupload({
  dataType: 'json',
  singleFileUploads: false,
  autoUpload: false,
  add: function(e, data) {
    $(".button.img-submit").click(function() {
      console.log(data);
      data.submit();
    });
  },

Answer 1

问题已解决。每次触发add回调时，click事件处理程序都会绑定。因此，第一次上传图像时，处理程序将绑定到该文件的按钮。第二次，处理程序再次绑定，现在是第二个文件。因此，两个文件都在第二次单击按钮时提交。在绑定单击事件处理程序之前将取消绑定添加到按钮可以解决该问题。修改后的代码：

$('#create-image').fileupload({
  dataType: 'json',
  singleFileUploads: false,
  autoUpload: false,
  add: function(e, data) {
    $(".button.img-submit").unbind().click(function() {
      data.submit();
    });
  },

jQuery文件上传插件在上传第二张图片时再次上传第一张图片

1 个答案: