双文件上传表单校验：两文件均选中时才启用上传按钮

你前后两版代码分别存在两个问题：

• 第一版代码重复声明input变量，变量被第二次赋值覆盖，实际仅给第二个文件输入框绑定了change事件，第一个输入框选文件时完全不会触发校验
• 第二版代码虽然给两个输入框都绑定了校验事件，但check函数只判断了触发当前change事件的单个输入框的文件选中状态，没有同时校验两个必填输入框的状态，所以只要当前操作的输入框选了文件，不管另一个有没有选，按钮都会被错误启用。

校验逻辑需要同时判断两个文件输入框是否都存在已选中的文件，只有两个输入框的files.length都大于0时，才移除上传按钮的disabled属性，否则保持禁用。

修正后的完整JS代码 #

// 初始化时一次性获取DOM元素，避免每次校验重复查询DOM
const fileInput1 = document.getElementById("FileOneToUpload");
const fileInput2 = document.getElementById("FileTwoToUpload");
const uploadBtn = document.getElementById("upload");

// 两个输入框都绑定校验事件
fileInput1.addEventListener('change', validateUploadStatus);
fileInput2.addEventListener('change', validateUploadStatus);

function validateUploadStatus() {
  // 同时校验两个输入框是否均已选中文件
  const isAllFileSelected = fileInput1.files.length > 0 && fileInput2.files.length > 0;
  // 未全部选中时按钮禁用，全部选中后启用
  uploadBtn.disabled = !isAllFileSelected;
}

对应HTML结构 #

原有HTML结构无需修改，保持原有属性即可：

<div class="form-group row">
  <label for="fileToUpload" class="col-sm-3 col-form-label">File 1:</label>
  <div class="col-sm-8">
    <input type="file" name="OneToUpload" id="FileOneToUpload" class="btn" accept=".pdf" required>
  </div>
</div>
<div class="form-group row">
  <label for="pdfToUpload" class="col-sm-3 col-form-label">File 2:</label>
  <div class="col-sm-8">
    <input type="file" name="TwoToUpload" id="FileTwoToUpload" class="btn" accept=".pdf" required>
  </div>
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
  <button type="button" id="upload" class="btn btn-success" disabled>Upload Files</button>
</div>

• DOM查询操作移到事件函数外，页面初始化时只执行一次，减少不必要的DOM性能消耗
• 简化逻辑判断：直接对两个输入框的文件选中状态做与运算，去掉冗余的三元表达式判断
• 变量命名语义化，避免后续维护时混淆变量对应的元素
• 扩展性更强：如果后续需要新增更多必填文件输入框，只需把新输入框的选中状态加入isAllFileSelected的判断条件即可

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