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

【问题标题】：jQuery file upload plugin uploads the first image again on uploading the second onejQuery文件上传插件在上传第二张图片时再次上传第一张图片
【发布时间】：2019-05-17 15:10:53
【问题描述】：

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

我尝试在单击提交按钮时触发文件上传，而不是在选择文件时触发默认提交。为此，我将 autoUpload 选项设置为 false (https://github.com/blueimp/jQuery-File-Upload/wiki/Options#autoupload)，并设置添加回调 (https://github.com/blueimp/jQuery-File-Upload/wiki/Options#add)。

第一次上传文件，一切顺利，点击提交按钮即可上传文件。但是，第二次上传时，提交时的 click 事件处理程序会触发两次，并在上传当前文件的同时上传上一个文件。

文件上传代码：

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

【问题讨论】：

你在哪里定义“数据”？
@Matt.S 无处可去。 data 保存有关提交的请求队列的信息。它有fileInput和files等字段。

标签： jquery jquery-file-upload

【解决方案1】：

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

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

【讨论】：