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

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

javascript jquery html

Javascript 使用jquery显示多输入类型文件的错误消息,javascript,jquery,html,Javascript,Jquery,Html,我的表单中有多个文件输入，我检查每个输入文件的文件大小和文件类型。我有一个显示错误消息的常规DIV，但我希望能够在不同的DIV中显示每个不同文件输入的错误消息。此代码仅适用于常规DIV： $("form#MyForm").submit(function() { if (window.File && window.FileReader && window.FileList && window.Blob) { var file

我的表单中有多个文件输入，我检查每个输入文件的文件大小和文件类型。我有一个显示错误消息的常规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>

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

将代码包装在.each（）中以循环每个输入元素。然后，您可以使用

.next（）

从文件中查找下一个div，这样您就可以为它们提供相同的类名（例如：“errorMessage”）

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>

您可以对脚本进行细微更改，以循环遍历每个可能显示错误的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>

@迈克的回答是正确的。这是你考虑的另一个选择。在本例中，我正在基于元素数组组进行实现，使用每个jquery函数并查找子元素input和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>


提交演示
多重验证
$（“#myform”）.submit（函数（事件）{
$（“div[name='files[]']）。每个（函数（索引，元素）{
var file=$（元素）.find（'input'）；
var iSize=（$（文件）[0]。文件[0]。大小/1024）；
控制台日志（iSize）；
console.log（file.val（）.split（'.'）.pop（）.toLowerCase（））；
如果（文件大小>5*1024*1024）{
//$（'#error'）.addClass（'alert-alert-danger'）；
$（元素）.find（'div'）.text（“文件大小超过5MB”）；
//返回false；
}
if（file&&file.type！=“application/pdf”）{
//$（“#错误”）.addClass（“警报-危险控制组”）；
$（元素）.find（'div'）.text（“仅PDF文件”）；
//返回false；
}
});
event.preventDefault（）；
});

感谢您花时间回答这个问题，我已经实现了您的解决方案，但是在每个输入文件中都会出现相同的错误消息（有文件和没有文件）。使用您的解决方案，我传递了一个9MB的pdf文件，并收到错误消息“仅pdf文件”。谢谢@Mike，您能告诉我如何将代码包装在.each（）中吗？您可以这样做<代码>$（“input[type='file']）。每个（function（）{var errorDiv=$（this）.next（“div.errorMessage”）；errorDiv.append（“这是id的错误”+errorDiv.attr（“id”）；}），因此，您将遍历具有文件类型的每个输入。对于这些元素中的每一个，获取其中包含的具有errorMessage类的div。然后，您可以将文本与相关文本一起附加（在上面的示例中，我刚刚选择了id属性来证明它是循环的-我建议使用

jquery validate

插件或在每个输入文件的

onChange

事件上验证单个输入文件。

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