2014-10-03 95 views
0

我正在使用jquery驗證,並且我想限制一些文件大小作爲輸入。要做到這一點,我添加的功能:jquery驗證文件大小

jQuery.validator.addMethod("maxfilesize", function(value, element, params) { 
    var elementsize; 
    try{ 
     elementsize = $("#browse_"+$(element).attr("id"))[0].files[0].size; 
    }catch(e){ 
     var browserInfo = navigator.userAgent.toLowerCase(); 
     if(browserInfo.indexOf("msie") > -1){ 
      var fso = new ActiveXObject("Scripting.FileSystemObject"); 
      elementsize = fso.getFile($("#browse_"+$(element).attr("id"))[0].value).size; 
     }else{ 
      return true; 
     } 
    } 
    var size = params[0], typesize = params[1]; 
    if(typesize == "Ko"){ 
     size *= 1024; 
    }else if(typesize == "Mo"){ 
     size *= 1024 * 1024; 
    }else if(typesize == "Go"){ 
     size *= 1024 * 1024 * 1024; 
    } 
    return this.optional(element) || elementsize < size; 
}, jQuery.format("The max file size of {0}{1} is reached")); 

我做檢查$("#browse_"+$(element).attr("id"))[0].files[0].size;,而不是元素,因爲我input type="file"是隱藏的使用引導到甲肝漂亮的按鈕。問題是它總是不確定的!

當我這樣做:

$("[id^=browse_]").change(function() { 
    alert('This file size is: ' + this.files[0].size + "MB"); 
}); 

的HTML看起來像這樣:

<form id="workflow_form" class="form-horizontal" role="form" novalidate="novalidate"> 
<fieldset> 
    <label class="col-sm-2 control-label" for="read_1">Read 1 browsefile__sl10Gb</label> 
    <div class="col-sm-10"> 
     <div class="input-group"> 
      <input id="read_1" class="form-control default" type="text" readonly="readonly" value="" name="read_1"> 
      <span class="input-group-btn"> 
       <button id="urlfile_btn_read_1" class="btn btn-default" type="button"> 
        <span class="glyphicon glyphicon-search"></span> 
       </button> 
      </span> 
     </div> 
     <span class="help-block">Which read1 files should be used</span> 
    </div> 
</fieldset> 
</form> 
<form style="display:none;" enctype="multipart/form-data" method="post"> 
    <input id="browse_read_1" class="fileupload" type="file" name="browse_read_1"> 
</form> 

我有一些JavaScript來處理與輸入的形式和按鈕,並與形式之間的聯繫輸入文件隱藏。我這樣做,以便使用filupload插件以及...

我做錯了什麼? 感謝您的回覆,

傑羅姆

+0

'$(元素).attr( 「ID」)'你會得到'#idname'。你被添加到'#browse_#idname'。我認爲這是你的問題 – 2014-10-03 08:17:35

+0

你能提供HTML標記,以便我們可以幫助你更好嗎? – laruiss 2014-10-03 08:20:55

+0

@Prashant當我做了我的元素console.log,這是一個正確的!我確實有#browse_idname。 – user1595929 2014-10-03 08:45:51

回答

0
$.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 KB至200 KB的大小限制 並且測試