jQuery 验证插件：验证多个输入文件

Posted 2023-02-24

【中文标题】jQuery 验证插件：验证多个输入文件

【英文标题】：jQuery validation-plugin: validating multiple input files

【发布时间】：2015-07-17 16:10:33

【问题描述】：

我想问一下如何使用jQuery验证插件来验证多个文件输入。

目前我有这些代码，但它不起作用：

.html:

<form id="uploadPhotoForm" enctype="multipart/form-data" method="POST">
    <table class= "uploadPhotoTable">
        <tr>
            <td>Photo</td>
            <td>:</td>
            <td><input class="field" type="file" name="files[]" id="upload_photo" align='right' multiple /></td>
        </tr>
    </table>    
</form>

.js:

$('#uploadPhotoForm').validate(
    rules: 
      files: 
      required: true,
      extension: "png"
    
    ,
    messages:
        files:
           required : "Please upload atleast 1 photo",
           extension:"Only png file is allowed!"
               
    
  );

我还将使用此代码发布到新的 php 进行处理。但似乎在我的 uploadPhoto.php 中，$_FILES['files']['tmp_name'] 是未定义的。我可以知道如何解决这个问题吗？

if ($('#uploadPhotoForm').valid())        
    $.ajax(
        url: "inc/uploadPhoto.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(data)
           $("#error1").html(data);
                   
    );

【参考方案1】：

你需要'files[]'而不是files，如果你不加additional-methods.js，你会这样做。

  $('#uploadPhotoForm').validate(
    rules: 
      'files[]': 
      required: true,
      extension: "png"
    
    ,
    messages:
        'files[]':
           required : "Please upload atleast 1 photo",
           extension:"Only png file is allowed!"
        

    

见jsFiddle。

关于序列化。 请阅读此how to do file upload using jquery serialization

更新：

会有用的

if ($('#uploadPhotoForm').valid())   
    var form = $('#uploadPhotoForm')[0]; //  [0], because you need to use standart javascript object here
    var formData = new FormData(form);
    $.ajax(
        url: "inc/uploadPhoto.php",
        type: "POST",
        data:  formData,
        contentType: false,
        cache: false,
        processData:false,
        success: function(data)
           $("#error1").html(data);
                   
    );

我认为您的代码不起作用，因为data: new FormData(this), 中的this 不是有效的javascript 表单对象。

【讨论】：

感谢您的回答...我对此还有一个问题要问...通常我会使用此代码发布到新的 php 进行处理，但它似乎在我的 uploadPhoto.php 中，$ _FILES['files']['tmp_name'] 未定义..我可以知道如何解决这个问题吗？ $.post('inc/uploadPhoto.php', $("#uploadPhotoForm").serialize(), function(data) );

我在答案中添加了链接。

它似乎对我不起作用......你能给我举个例子吗？

选择两个文件。一个png 和另一个pdf。它不会显示验证消息。

【参考方案2】：

对于可能通过谷歌登陆此页面的人。我使用以下解决方案解决了这个问题，因为它无法正常处理不同格式的多个上传。

<input type="file" id="upload_files" name="uploaded_files[]"  required="required" multiple>

我做了一个自定义验证器方法，因为默认验证器没有正确验证多个文件。如果我选​​择第一个文件作为 pdf 和另一个 png。此示例验证 pdf、doc 和 docx 文件。

$(function() 
    $.validator.addMethod(
            "validate_file_type",
            function(val,elem) 
                console.log(elem.id);
                    var files    =   $('#'+elem.id)[0].files;
                console.log(files);
                for(var i=0;i<files.length;i++)
                    var fname = files[i].name.toLowerCase();
                    var re = /(\.pdf|\.docx|\.doc)$/i;
                    if(!re.exec(fname))
                    
                        console.log("File extension not supported!");
                        return false;
                    
                
                return true;
            ,
            "Please upload pdf or doc or docx files"
    );
    // Initialize form validation on the registration form.
    // It has the name attribute "registration"
    $("form[name='formname']").validate(
        // Specify validation rules
        rules: 
            'uploaded_files[]':
                required: true,
                validate_file_type : true
            
        ,
        // Specify validation error messages
        messages: 

            'uploaded_files[]':
                required : "Please upload atleast 1 document",
                /*accept:"Please upload .docx or .pdf files"*/
            
        ,
        // Make sure the form is submitted to the destination defined
        // in the "action" attribute of the form when valid
        submitHandler: function(form) 
            form.submit();
        
    );

);