2014-10-03 79 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的大小限制 并且测试