如何使用jQuery为多个文件输入框显示对应错误信息

没问题，我来帮你调整代码，让每个文件输入框的错误信息都精准显示在对应的专属DIV里。核心思路就是遍历每个文件输入框，单独做校验，然后把错误信息放到匹配的错误容器中，具体实现如下：

保持你的HTML结构不变 #

你的现有HTML结构已经很清晰了，每个文件输入框对应一个同编号的错误DIV，直接沿用即可：

<form id="MyForm">
  <input type="file" id="file1">
  <div id="error1"></div>
  
  <input type="file" id="file2">
  <div id="error2"></div>
  
  <input type="file" id="file3">
  <div id="error3"></div>
  
  <input type="file" id="file4">
  <div id="error4"></div>

  <button type="submit">提交表单</button>
</form>

修改后的JavaScript代码 #

这段代码会遍历所有文件输入框，逐个校验文件大小和类型，并把错误信息精准投递到对应DIV中：

$("form#MyForm").submit(function(e) {
    // 初始化表单校验状态为通过
    let isFormValid = true;
    
    // 先检查浏览器是否支持File API（保证校验功能可用）
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        // 遍历每个文件输入框，单独处理
        $('input[type="file"]').each(function() {
            const $fileInput = $(this);
            const selectedFile = $fileInput[0].files[0];
            // 匹配对应的错误容器：比如file1 -> error1
            const $errorBox = $('#error' + $fileInput.attr('id').replace('file', ''));
            
            // 清空之前的错误信息和样式，避免残留旧错误
            $errorBox.empty().removeClass('alert alert-danger control-group');
            
            // 只有选择了文件才执行校验逻辑
            if (selectedFile) {
                // 校验文件大小（限制5MB）
                if (selectedFile.size > 5 * 1024 * 1024) {
                    $errorBox.addClass('alert alert-danger').text("文件大小超过5MB限制");
                    isFormValid = false;
                }
                // 校验文件类型（仅支持PDF）
                else if (selectedFile.type !== 'application/pdf') {
                    $errorBox.addClass('alert alert-danger control-group').text("仅支持PDF格式文件");
                    isFormValid = false;
                }
            }
            // 如果你需要强制每个输入框必须选文件，可以取消下面的注释
            // else {
            //     $errorBox.addClass('alert alert-danger').text("请选择文件");
            //     isFormValid = false;
            // }
        });
    } else {
        // 浏览器不支持File API时的友好提示
        $('#error1').addClass('alert alert-danger').text("您的浏览器不支持文件校验，请使用现代浏览器");
        isFormValid = false;
    }
    
    // 如果存在任何错误，阻止表单提交
    if (!isFormValid) {
        e.preventDefault();
    }
});

关键细节说明 #

• 独立遍历处理：用each()方法逐个处理每个文件输入框，确保每个框的校验逻辑互不干扰
• 精准匹配容器：通过输入框ID拼接出对应错误容器的ID，保证错误信息显示在正确的位置
• 错误状态重置：每次校验前清空错误容器的内容和样式，避免上次的错误信息残留影响用户判断
• 全局状态跟踪：用isFormValid变量统一跟踪所有文件的校验结果，只要有一个文件不符合要求，就阻止表单提交

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