javascript - 使用 jquery 显示多输入类型文件的错误消息

Question

我的表单中有多个文件输入，我检查每个输入文件的文件大小和文件类型。我有一个出现错误消息的通用 DIV，但我想要的是能够为不同 DIV 中的每个不同文件输入显示错误消息。此代码仅适用于一般 DIV:

$("form#MyForm").submit(function() {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var file = $('input[type="file"]')[0].files[0];
        $('#error').empty();

        if (file && file.size > 5 * 1024 * 1024) {
            $('#error').addClass('alert alert-danger');
            $('#error').append("File size exceeds 5 MB");
            return false;
        }

        if (file && file.type != 'application/pdf') {
            $('#error').addClass('alert alert-danger control-group');
            $('#error').append("Only PDF files");
            return false;
        }
    }
});

HTML代码:

<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>

如何遍历文件输入并为不符合要求的输入显示错误消息？

Answer 1

将您的代码包装在 .each() 中以循环遍历每个输入元素。然后对于每一个，您可以使用 .next() 从文件中定位下一个 div，这样您就可以为它们提供相同的类名(例如:“errorMessage”)

$( "input").next("div.erroMessage").append(your error message here);

HTML 的位置

<input type="file" id="file1">
<div class="errorMessage" id="error1"></div>

<input type="file" id="file2">
<div class="errorMessage" id="error2"></div>

<input type="file" id="file3">
<div class="errorMessage" id="error3"></div>

<input type="file" id="file4">
<div class="errorMessage" id="error4"></div>