フォームを送信する前にファイルの拡張子とサイズを確認してください

Question

jQueryの検証プラグインを使用していて、フォームを送信する前にファイルの拡張子とファイルサイズを検証します。

"use strict"; 
$('#update_profile').validate({ 
    rules: { 
     FirstName: { 
      required: true, 
      maxlength: 20 
     }, 
     image: { 
      required: true, 
      extension: "jep | jpeg", 
      filesize : 50000, 
     } 
    } 
}); 

私は上記と同様のコードを望みます。あなたは、ファイルの拡張子も、ファイルサイズを検証するためのカスタムルールを記述する必要が

Answer 1

は、カンマで区切られた文字列

$.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"; 
 
    $('#update_profile').validate({ 
 
     rules: { 
 
      FirstName: { 
 
       required: true, 
 
       maxlength: 20 
 
      }, 
 
      image: { 
 
       required: true, 
 
       extension: "jpg,jpeg", 
 
       filesize: 5, 
 
      } 
 
     }, 
 
    }); 
 
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script> 
 

 
<form id="update_profile" method="post" action=""> 
 
    <input type="file" name="image" /> 
 
    <input type="submit" value="Save" /> 
 
</form>

Answer 2

$.validator.addMethod('filesize', function (value, element, arg) { 
      var minsize=1000; // min 1kb 
      if((value>minsize)&&(value<=arg)){ 
       return true; 
      }else{ 
       return false; 
      } 
     }); 

     $("#myform").validate({ 
      rules: { 
       file_upload:{ 
        required:true, 
        accept:"application/pdf,image/jpeg,image/png", 
        filesize: 200000 //max size 200 kb 
       } 
      },messages: { 
       file_upload:{ 
        filesize:" file size must be less than 200 KB.", 
        accept:"Please upload .jpg or .png or .pdf file of notice.", 
        required:"Please upload file." 
       } 
      }, 
      submitHandler: function(form) { 
       form.submit(); 
      } 
     }); 

最小最大の1キロバイトとして渡されなければならファイルサイズは200 KBであり、それはテストされている

Answer 3

HTML 


       <div class="col-sm-9 col-lg-6 col-xs-12 col-md-9"> 
        <div class="input-group"> 
         <input type="text" class="form-control" name="uploadFile" readonly id="uploadFile"> 
         <span class="input-group-btn"> 
          <span class="btn btn-primary btn-file"> 
           Browse&hellip; <input type="file" id="uploadFile" name="uploadFile" >   
          </span> 
         </span> 
        </div> 
        <div id="spanUploadFile"> 

//Message will display here 
        </div> 

       </div> 


JQuery 



$(document).on('change', '.btn-file :file', function() { 

     var input = $(this),numFiles = input.get(0).files ? input.get(0).files.length : 1, 
       label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); 
     var msg = "spanUploadFile"; 
     input.trigger('fileselect', [numFiles, label]); 
     genrateFileMsg(this.id, msg) 
genrateSizeMsg(this.files[0], msg) 


    }); 

function genrateFileMsg(id, nId) 
    { 

     var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp']; 
     var fileExtensionDOB = ['pdf']; 
     //var fileExtensionDOB = ['pdf', 'doc', 'docx', 'txt', ]; 

      if ($.inArray($("#" + id).val().split('.').pop().toLowerCase(), fileExtension) == -1) { 
       $("#" + nId).html("Only files of type jpg, png, gif, jpeg is allowed"); 

       return false; 
      } 







     return true 
    } 
    function genrateSizeMsg(f, nId) 
    { 

     var f = f.size; 


      f = f/1024; 

      if (f > 100) 
      { 
       $("#" + nId).html("The file you are trying to upload is too large (max 100KB)"); 
       return false; 
      } 



     return true; 
    } 

Answer 4

$.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"; 
 
    $('#update_profile').validate({ 
 
     rules: { 
 
      FirstName: { 
 
       required: true, 
 
       maxlength: 20 
 
      }, 
 
      image: { 
 
       required: true, 
 
       extension: "jpg,jpeg", 
 
       filesize: 5, 
 
      } 
 
     }, 
 
    }); 
 
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script> 
 

 
<form id="update_profile" method="post" action=""> 
 
    <input type="file" name="image" /> 
 
    <input type="submit" value="Save" /> 
 
</form>