jQuery对话框上传按钮点击后文件上传数量递增问题求助

你遇到的上传次数递增问题，核心原因是事件绑定重复叠加：
每次点击按钮调用gpa_pl_upd_photo_upload()函数时，都会给#gpa_pl_upd_photo这个文件输入框绑定一个新的change事件处理器。当用户选择文件触发change事件时，所有之前绑定的事件都会依次执行，所以第一次点击后触发1次上传，第二次点击后触发2次，以此类推。

下面提供三种可行的修复方式，任选其一即可：

方式1：将事件绑定移到函数外部（推荐） #

把change事件的绑定逻辑放在函数外面，确保只绑定一次：

// 页面加载完成后只绑定一次change事件
$(function() {
  $("#gpa_pl_upd_photo").change(function(e) {
    alert('gpa_pl_upd_photo_upload');

    var varPic = $('#gpa_pl_upd_photo')[0].files[0];
    var varExistingPhotoID = $("#gpa_pl_upd_photoid").val();

    var formData = new FormData();
    formData.append('photo', varPic);
    formData.append('existing_pic', varExistingPhotoID);

    $.ajax({
      type: "POST",
      url: "php/gpa_pl_upd_photo_upload.php",
      data: formData,
      dataType: 'json',
      cache: false,
      contentType: false,
      processData: false,
      success: function(data, status, xhr) {
        // 原有的成功逻辑
      }
    });
  });
});

// 按钮点击只负责触发文件选择框
function gpa_pl_upd_photo_upload() {
  $("#gpa_pl_upd_photo").trigger('click');
}

方式2：绑定事件前先解绑 #

在每次绑定change事件前，先移除之前的事件绑定，避免叠加：

function gpa_pl_upd_photo_upload() {
  $("#gpa_pl_upd_photo").trigger('click');
  // 先解绑所有change事件，再绑定新的
  $("#gpa_pl_upd_photo").off('change').on('change', function(e) {
    alert('gpa_pl_upd_photo_upload');

    var varPic = $('#gpa_pl_upd_photo')[0].files[0];
    var varExistingPhotoID = $("#gpa_pl_upd_photoid").val();

    var formData = new FormData();
    formData.append('photo', varPic);
    formData.append('existing_pic', varExistingPhotoID);

    $.ajax({
      type: "POST",
      url: "php/gpa_pl_upd_photo_upload.php",
      data: formData,
      dataType: 'json',
      cache: false,
      contentType: false,
      processData: false,
      success: function(data, status, xhr) {
        // 原有的成功逻辑
      }
    });
  });
}

方式3：使用.one()绑定单次事件 #

利用jQuery的.one()方法，让事件只执行一次，每次点击按钮时重新绑定：

function gpa_pl_upd_photo_upload() {
  $("#gpa_pl_upd_photo").trigger('click');
  // 使用.one()，确保每个change事件只执行一次
  $("#gpa_pl_upd_photo").one('change', function(e) {
    alert('gpa_pl_upd_photo_upload');

    var varPic = $('#gpa_pl_upd_photo')[0].files[0];
    var varExistingPhotoID = $("#gpa_pl_upd_photoid").val();

    var formData = new FormData();
    formData.append('photo', varPic);
    formData.append('existing_pic', varExistingPhotoID);

    $.ajax({
      type: "POST",
      url: "php/gpa_pl_upd_photo_upload.php",
      data: formData,
      dataType: 'json',
      cache: false,
      contentType: false,
      processData: false,
      success: function(data, status, xhr) {
        // 原有的成功逻辑
      }
    });
  });
}

内容的提问来源于stack exchange，提问作者dodgebros