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

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

Answer 2

您可以对脚本进行细微更改，以循环显示可能显示错误的每个div

    if (file && file.size > 5 * 1024 * 1024) {
        $('.error-display-div').each(function(){
          $(this).addClass('alert alert-danger');
          $(this).html("File size exceeds 5 MB");
        });
        return false;
     }

对于HTML，只需为每个错误div添加一个公共类，如下所示，

     <input type="file" id="file1">
     <div class="error-display-div" id="error1">
     </div>

     <input type="file" id="file2">
     <div class="error-display-div" id="error2">
     </div>

     <input type="file" id="file3">
     <div class="error-display-div" id="error3">
     </div>

Answer 3

@ Mike的回答是正确的。这是您要考虑的另一种选择。在这个例子中，我正在研究一个基于数组元素的实现，使用每个jquery函数并查找子元素如何输入和div。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>submit demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>multiple validation</p>
<form action="javascript:alert( 'success!' );" id="myform">
  <div>
    <div name="files[]" >
        <input type="file">
        <div></div>
    </div>

    <div name="files[]">
            <input type="file">
            <div></div>
    </div>

    <div name="files[]">
            <input type="file">
            <div></div>
    </div>
    <input type="submit">
  </div>
</form>
<span></span>

<script>
$( "#myform" ).submit(function( event ) {
    $( "div[name='files[]']" ).each( function( index, element ){
        var file = $(element).find('input');
        var iSize = ($(file)[0].files[0].size / 1024);
        console.log(iSize);
        console.log(file.val().split('.').pop().toLowerCase());
        if (file && iSize > 5 * 1024 * 1024) {
            //$('#error').addClass('alert alert-danger');
            $(element).find('div').text("File size exceeds 5 MB");
            //return false;
        }
        if (file && file.type != 'application/pdf') {
            //$('#error').addClass('alert alert-danger control-group');
            $(element).find('div').text("Only PDF files");
            //return false;
        }
    });
    event.preventDefault();
});
</script>
</body>
</html>

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

3 个答案: