2014-06-28 25 views
-2

我有一個表格,我想驗證最大大小爲9MB的輸入類型文件。我怎樣才能做到這一點?如何在JQuery中驗證輸入文件的大小?

<form id="pform" method="post" name="jform"> 

<input type="file" name="file" id="filed" required="required"> 

<input type="submit" value="PUBLISH PHOTO" id="hello" name="publishpost" > 

</form> 
+0

http://stackoverflow.com/questions/5697605/limit-the-size-of-an-file-的可能重複upload-html-input – yuvi

回答

1
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" > </script> 
    <script type="text/javascript"> 
    function GetFileSize(fileid) { 
    try { 
    var fileSize = 0; 
    //for IE 
    if ($.browser.msie) { 
    //before making an object of ActiveXObject, 
    //please make sure ActiveX is enabled in your IE browser 
     var objFSO = new ActiveXObject("Scripting.FileSystemObject"); 
     var filePath = $("#" + fileid)[0].value; 
     var objFile = objFSO.getFile(filePath); 
     var fileSize = objFile.size; //size in kb 
     fileSize = fileSize/1048576; //size in mb 
     } 
    //for FF, Safari, Opeara and Others 
     else { 
     fileSize = $("#" + fileid)[0].files[0].size //size in kb 
     fileSize = fileSize/1048576; //size in mb 
     } 
     alert("Uploaded File Size is" + fileSize + "MB"); 
     } 
     catch (e) { 
     alert("Error is :" + e); 
     } 
     } 
    </script> 


    <form id="pform" method="post" name="jform"> 

    <input type="file" name="filed" id="filed" required="required"> 

    <input type="button" value="PUBLISH PHOTO" id="hello" name="publishpost" onclick="GetFileSize('filed');" > 

    </form> 
+1

這將適用於所有瀏覽器... –

+0

我已經這{{onsubmit =「return validateForm( )「}在提交按鈕,那麼如何添加第二個功能 – user3739733

+0

然後你可以在你的validateForm()函數中添加上述函數的內容... –

2

嘗試類似:

$('#filed').change(function(){ 

var filesize = this.files[0].size/1024/1024; //(IN MB) 

}); 
+0

這裏我需要把9mb放在這個{this.files [0] .size/1024/1024; //(IN MB)} .. – user3739733

+0

if(filesize> 9)..... show alert ..... –

0
<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" name="file" id="filed" required="required">  
          </span> 
         </span> 
        </div> 
        <div id="spanFileUploadMsg"> 


        </div> 

       </div> 
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" > </script> 
    <script type="text/javascript"> 



$(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(/.*\//, ''); 

     input.trigger('fileselect', [numFiles, label]); 
     genrateSizeMsg(this.files[0]) 

    }); 

    function genrateSizeMsg(f) 
    { 

     var f = f.size; 
      f = f/1048576; 

      if (f > 9) 
      { 

       $("#spanFileUploadMsg").html("The file you are trying to upload is too large (max 9MB)");/* This message will be display in "spanFileUploadMsg" id when size is greater than 9MB */ 
       return false; 
      } 

     return true; 
    } 
</script>