如何验证表单控制数据大小不超过2.5 mb

Question

我有一个表单，它有名字、姓氏等控件，还有文件上传附件。我需要计算所有的数据应该达到250兆以上。

我们如何使用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. 使用闪存上传器（例如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');
    }
}