Rails 5中如何阻止jQuery-File-Upload的重复表单提交？

嘿，作为曾经踩过类似坑的开发者，我太懂这种重复生成帖子的崩溃感了！这种问题大概率是事件重复绑定导致的——每次用户重新选择图片时，你的提交事件监听被多次添加，触发一次就会执行N次（N就是重选的次数）。下面给你几个实用的解决方案：

1. 先解绑再绑定提交事件 #

这是最直接的办法，每次初始化提交逻辑前，先移除之前绑定的submit事件，避免叠加：

$(function() {
  // 先解绑所有已绑定的submit事件
  $('.directUpload').off('submit').on('submit', function(e) {
    e.preventDefault();
    // 你的原有提交逻辑（裁剪、上传到S3等）
    // ...
  });
});

如果你的事件绑定是在某个裁剪完成的回调里，一定要确保每次回调执行前都先解绑，再重新绑定。

2. 使用提交状态锁防止重复触发 #

添加一个全局变量标记当前是否正在提交，提交过程中阻止再次触发：

// 定义一个状态变量，初始为未提交
let isUploading = false;

$(function() {
  $('.directUpload').on('submit', function(e) {
    // 如果正在上传，直接阻止提交
    if (isUploading) {
      e.preventDefault();
      return;
    }
    
    isUploading = true;
    e.preventDefault();
    
    // 执行你的裁剪和上传逻辑
    // 比如调用blueimp的上传方法，或者自定义AJAX请求
    $.ajax({
      url: $(this).attr('action'),
      method: 'POST',
      data: new FormData(this),
      // ... 其他配置项
      // 请求完成（成功/失败）后重置状态
      complete: function() {
        isUploading = false;
      }
    });
  });
});

这个方法能从根源上阻止同一时间的多次提交，即使事件被重复绑定也能生效。

3. 检查blueimp插件的初始化方式 #

如果你是直接初始化fileupload插件，可能每次重新选图都重复初始化了插件，导致内部事件重复绑定。可以：

• 把插件初始化放在页面加载时的一次性逻辑里，不要放在选图/裁剪的回调中；
• 如果必须动态初始化，先销毁之前的实例：

// 先销毁已存在的fileupload实例
$('.fileupload').fileupload('destroy');
// 再重新初始化
$('.fileupload').fileupload({
  url: '/your-s3-upload-url',
  type: 'POST',
  singleFileUploads: true, // 单文件上传场景建议开启
  // ... 你的其他配置
});

小提示 #

你可以先在浏览器控制台查看元素的事件绑定列表，确认是不是真的有多个submit事件被绑定，这样能更精准定位问题。

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