jQuery validation-plugin:验证多个输入文件

use*_*740 5 jquery jquery-validate

我想问一下如何使用jQuery validation-plugin验证多个文件输入.

目前我有这些代码,但它不起作用:

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>
Run Code Online (Sandbox Code Playgroud)

.js文件:

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

我还将使用此代码发布到新的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);
        }           
    });
}
Run Code Online (Sandbox Code Playgroud)

Ash*_*yan 5

您需要'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!"
        }

    }
Run Code Online (Sandbox Code Playgroud)

jsFiddle.

关于序列化.请阅读本文如何使用jquery序列化进行文件上传

更新:

它会工作

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);
        }           
    });
}
Run Code Online (Sandbox Code Playgroud)

你认为你的代码没有用,因为thisdata: new FormData(this),无效的javascript表单对象中.

  • 选择两个文件.一个`png`和其他`pdf`.它不会显示验证消息. (2认同)