如何驗證表單控件數據大小不超過2.5 mb？

Question

我有一個窗體，它具有名字，姓氏等控件，還有文件上傳附件。我需要計算所有數據應該達到2.5 MB以上。

我們如何使用jQuery做到這一點，並在該頁面上顯示驗證錯誤？

<form action="/ContactSubmission" class="form-horizontal" enctype="multipart/form-data" method="post" role="form" novalidate="novalidate">     
    <div class="col-sm-7"> 
      <input class="form-control input-validation-error" data-val="true" data-val-required="The First Name field is required." id="FirstName" name="FirstName" placeholder="First Name" required="required" type="text" value=""> 
      <span class="field-validation-error" data-valmsg-for="FirstName" data-valmsg-replace="true" style="color:Red"><span for="FirstName" class="">The First Name field is required.</span> 
    </div> 
    <div class="col-sm-7"> 
      <input class="form-control" data-val="true" data-val-required="The Last Name field is required." id="LastName" name="LastName" placeholder="Last Name" type="text" value=""> 
      <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true" style="color:Red"></span> 
    </div> 
    <div class="col-sm-7"> 
      <input class="form-control" data-val="true" data-val-required="The Email Address field is required." id="EmailAddress" name="EmailAddress" placeholder="Email Address" type="text" value=""> 
      <span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true" style="color:Red"></span> 
     </div> 
     <div class="col-sm-7"> 
      <input class="form-control" id="Attachement" name="Attachement" type="file" value=""> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-4 col-md-offset-5"> 
       <button type="submit" class="btn btn-primary">Submit</button> 
       <button type="button" class="btn btn-default" id="cancel">Cancel</button> 
      </div> 
     </div> 

Answer 1

隨着現代瀏覽器（該瀏覽器支持HTML5），你可以檢查<input type="file">元素的文件的size財產。

var input = $('input[type="file"]')[0]; 
var fileSize = input.files[0].size // file size in bytes 

在舊的瀏覽器（不支持HTML5的瀏覽器），你不能做到這一點使用jQuery因爲jQuery（JavaScript的）不具有訪問您通過<input type="file">提交文件的大小。你有兩個備選方案：

1. 使用Flash上​​傳（swfupload爲例）。 Flash 確實有訪問文件的大小，與JavaScript相反。

2. 讓用戶上傳文件（即使它太大）（使用您現有的form），檢查後端的文件大小，然後向他顯示一條消息，指出文件已被丟棄，因爲它太大。

第一個解決方案（flash）的優點是不會讓用戶等待，直到超大文件的上傳完成。由於它可以訪問文件大小，因此您可以在上傳開始之前顯示錯誤。

Answer 2

您可以檢查文件輸入的files - 屬性是這樣的：

<input type="file" name="photo" id="photo"> 

腳本：

var photo=document.getElementById('photo'); 
photo.onchange = function() { 
    var file = photo.files[0]; 
    if (file.size>2621440) { 
     alert('Filesize must 2.5mb or below'); 
    } 
}