多文件上传场景下选中文件后启用对应禁用提交按钮的通用实现

第一步：修复HTML的重复ID问题 #

HTML里的id属性必须全局唯一，你当前多个表单复用相同的filename和uploadButton ID，会导致JS只能选中第一个匹配元素。把这些ID替换为class即可复用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<h1>Upload Files</h1>

<form enctype="multipart/form-data" asp-action="UploadFile" asp-controller="Ls" method="post">
  <dl>
    <dd>
      <input type="file" name="file" class="filename">
    </dd>
  </dl>
  <input class="btn btn-primary uploadButton" type="submit" value="Upload" disabled/>
</form>

<form enctype="multipart/form-data" asp-action="UploadFile" asp-controller="Cv" method="post">
  <dl>
    <dd>
      <input name="file" type="file" class="filename">
    </dd>
  </dl>
  <input class="btn btn-primary uploadButton" type="submit" value="Upload" disabled/>
</form>
<!-- 更多表单保持同样的class命名规则 -->

第二步：修改JS逻辑实现通用控制 #

利用jQuery的DOM遍历方法，关联当前文件输入框与所在表单的提交按钮，实现每个表单独立控制：

// 给所有文件输入框绑定change事件
$('.filename').on('change', function() {
  // 定位当前输入框所属表单内的提交按钮
  const $submitBtn = $(this).closest('form').find('.uploadButton');
  // 根据是否选中文件切换按钮禁用状态
  $submitBtn.prop('disabled', !$(this).val());
});

$("form").submit(function(eventObj) {
  var formData = new FormData(eventObj.currentTarget);

  $.ajax({
    url: eventObj.currentTarget.action,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    cache: false,
    enctype: 'multipart/form-data',

    success: function(data, textStatus, jqXHR) {
      console.log("in success");
      // 上传成功后重置当前表单的按钮状态和文件输入
      $(eventObj.currentTarget).find('.uploadButton').prop('disabled', true);
      $(eventObj.currentTarget).find('.filename').val('');
    },
    error: function(jqXHR, textStatus, errorThrown) {}
  });
  return false;
});

关键说明 #

• closest('form')：从当前元素向上查找最近的<form>父元素，确保只操作当前表单内的元素
• find('.uploadButton')：在目标表单内精准定位提交按钮，避免影响其他表单
• !$(this).val()：简化状态判断，文件输入有值时自动启用按钮，无值则禁用
• 上传成功后重置表单状态，优化用户重复上传的体验

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