jQuery表单仅图片变更启用提交按钮遇文件输入失效问题

问题根源 #

你使用的serialize()方法不会序列化file类型的输入控件——因为file控件存储的是二进制文件数据，而serialize()仅能处理文本类表单数据。所以当你选择图片后，表单的序列化值和初始值完全一致，按钮的启用判断逻辑自然失效，始终保持禁用状态。

修复方案 #

我们需要同时跟踪表单文本内容的变化，以及file控件的文件状态变化，结合这两个条件来判断是否启用按钮。以下是修改后的完整代码：

完整JavaScript代码 #

$('.form_contact')
  // 初始化：保存表单初始状态
  .each(function() {
    const $form = $(this);
    // 保存文本类表单的序列化值
    $form.data('serialized', $form.serialize());
    // 保存所有file控件的初始文件数量（初始无文件时为0）
    $form.data('initialFileCount', $form.find('input[type="file"]').filter((i, el) => el.files.length > 0).length);
  })
  // 监听表单内容变化事件
  .on('change input', function() {
    const $form = $(this);
    // 判断文本类内容是否和初始一致
    const isTextUnchanged = $form.serialize() === $form.data('serialized');
    // 判断当前file控件的文件数量是否和初始一致
    const currentFileCount = $form.find('input[type="file"]').filter((i, el) => el.files.length > 0).length;
    const isFileUnchanged = currentFileCount === $form.data('initialFileCount');
    
    // 只有当文本和file都没变化时，才禁用按钮
    const shouldDisableButtons = isTextUnchanged && isFileUnchanged;
    $form.find('button:reset, button:submit').attr('disabled', shouldDisableButtons);
  })
  // 监听重置事件，重置后更新初始状态
  .on('reset', function() {
    const $form = $(this);
    // 用setTimeout确保重置操作完成后再更新状态
    setTimeout(() => {
      $form.data('serialized', $form.serialize());
      $form.data('initialFileCount', $form.find('input[type="file"]').filter((i, el) => el.files.length > 0).length);
      $form.find('button:reset, button:submit').attr('disabled', true);
    }, 10);
  })
  // 初始化时禁用按钮
  .find('button:reset, button:submit')
  .attr('disabled', true);

代码说明 #

1. 初始化阶段：除保存表单序列化值外，额外记录所有file控件的初始文件数量（初始无文件时数量为0）。
2. 变化监听：同时检查两个条件：文本类表单内容是否未变化、file控件的文件数量是否未变化。只有两者都没变化时，才禁用按钮。
3. 重置事件处理：点击重置按钮后，表单恢复初始状态，此时需重新更新保存的初始值，确保后续判断逻辑正常工作。

适配说明 #

• 支持单个或多个file类型输入控件。
• 兼容原有的文本输入框、textarea、select控件逻辑，不影响它们的正常工作。

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