배열에 jquery 이미지 유효성 검사가 작동하지 않습니다.

Question

jQuery 유효성 검사가 올바르게 작동하지만 배열에 대해 작동하지 않습니다. 여기에있는 작업 코드를 확인하십시오.

http://jsfiddle.net/rq5ra/1050/

난 후 작동하지 않는 입력의 배열을 추가 한 경우.

HTML 코드

<form id="createprofile"> 
    <input type="file" name="profilepic[]"> 
    <input type="file" name="profilepic[]"> 
    <input type="submit" /> 
</form> 

jQuery 코드 것은

$.validator.addMethod('filesize', function (value, element, param) { 
    return this.optional(element) || (element.files[0].size <= param) 
}, 'File size must be less than {0}'); 
jQuery(function ($) { 
    "use strict"; 
    $('#createprofile').validate({ 
     errorElement: "label" 
     , errorClass: "has-error" 
     , submitHandler: function (form) { 
      form.submit(); //return false; 
     } 
     , highlight: function (element) { 
      $(element).closest('.form-group').removeClass('success').addClass('has-error'); 
     } 
     , rules: { 
      profilepic[]: { 
       extension: "jpg,jpeg" 
       , filesize: 300000, //500kb 
      } 
     }, 
     messages: { 
      profilepic[]: { 
       extension: "Please upload only jpg, jpeg format" 
       ,filesize: "Please upload maximum 500Kb" 
      } 
     } 
    }); 
}); 

내가 그것을 해결하기 위해 도와주세요.

Answer 1

작업 코드 http://jsfiddle.net/rq5ra/1052/

$.validator.addMethod('filesize', function (value, element, param) { 
return this.optional(element) || (element.files[0].size <= param)}, 'File size must be less than {0}'); 
jQuery(function ($) { 
"use strict"; 
$('#createprofile').validate({ 
    errorElement: "label" 
    , errorClass: "has-error" 
    , submitHandler: function (form) { 
     form.submit(); //return false; 
    } 
    , highlight: function (element) { 
     $(element).closest('.form-group').removeClass('success').addClass('has-error'); 
    } 
    , rules: { 
     "profilepic[]": { 
      extension: "jpg,jpeg" 
      , filesize: 300000, //500kb 
     } 
     , profileurl: { 
      remote: { 
       url: "http://localhost:8888/codeigniternew/edit/username_exists" 
       , type: "post" 
      } 
     } 
     , email: { 
      required: true 
      , remote: { 
       url: "http://localhost:8888/codeigniternew/edit/email_exists" 
       , type: "post" 
      } 
     } 
    }, 
    messages: { 
     "profilepic[]": { 
      extension: "Please upload only jpg, jpeg format" 
      ,filesize: "Please upload maximum 500Kb" 
     } 
    } 
}); 
}); 

Answer 2

HTML 코드

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
<form id="FORM_SEND_IMAGE"> 
    <input type="file" id="file" /> 
    <input type="submit" value="submit" /> 
</form> 

jQuery 코드 "[] profilepicp"추가하십시오

function getExtension(filename) { 
    var parts = filename.split('.'); 
    return parts[parts.length - 1]; 
} 

function isImage(filename) { 
    var ext = getExtension(filename); 
    switch (ext.toLowerCase()) { 
    case 'jpg': 
    case 'png': 
    case 'gif': 
     //etc 
     return true; 
    } 
    return false; 
} 

$(document).on('submit', '#FORM_SEND_IMAGE', function(e) { 

    e.preventDefault(); 
    e.stopPropagation(); 

    function failValidation(msg) { 
     alert(msg); // just an alert for now but you can spice this up later 
     return false; 
    } 

    var file = $('#file'); 
    if (!isImage(file.val())) { 
     return failValidation('Please select a valid image'); 
    } 

    var form_data = new FormData($(this)[0]); 

    $.ajax({ 
     url: base_url + 'gallery/add', 
     type: 'POST', 
     data: form_data, 
     dataType: 'json', 
     beforeSend: function() { 
      console.log('before'); 
     }, 
     error: function(error) { 
      console.log(error); 
     }, 
     success: function(data) { 
      console.log(data); 
     }, 
     complete: function() { 
      console.log('complete'); 
     }, 
     processData: false, 
     contentType: false 
    }); 
}); 

demo jsfiddle