Sprawdź poprawność rozszerzenia pliku i rozmiaru przed przesłaniem formularza

Question

Używam wtyczki validate jQuery i chcę sprawdzić poprawność rozszerzenia pliku i rozmiaru pliku przed wysłaniem formularza.

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

Chcę kodu podobnego do powyższego.

Answer 1

Musisz napisać regułę niestandardową, aby potwierdzić rozmiar pliku, a także rozszerzenia plik ma zostać przekazany jako przecinek oddzielone ciąg

$.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(); 
      } 
     }); 

Min 1 KB max Rozmiar pliku 200 kb i jest testowany

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>