如何用jQuery检查文件输入大小？

Question

我有一个具有文件上传功能的表单,如果用户尝试上传的文件太大,我希望能够有一些不错的客户端错误报告,有没有办法用jQuery检查文件大小,要么纯粹在客户端或以某种方式将文件发回服务器进行检查？

Answer 1

您实际上无权访问文件系统(例如读取和写入本地文件),但是,由于HTML5文件Api规范,您可以访问一些文件属性,文件大小就是其中之一.

对于下面的HTML

<input type="file" id="myFile" />

尝试以下方法:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

由于它是HTML5规范的一部分,它只适用于现代浏览器(IE需要v10),我在这里添加了更多关于您应该知道的其他文件信息的详细信息和链接:http://felipe.sabino.me/javascript/2012/01/30/javascipt的检查的所述文件尺寸/

旧浏览器支持

请注意,旧浏览器将返回null上一次this.files调用的值,因此访问this.files[0]将引发异常,您应该在使用之前检查File API支持

Answer 2

如果你想使用jQuery,validate你可以通过创建这个方法:

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (en bytes) 
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param) 
});

你会用它:

$('#formid').validate({
    rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576  }},
    messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});

Answer 3

这段代码:

$("#yourFileInput")[0].files[0].size;

返回表单输入的文件大小.

在FF 3.6及更高版本中,此代码应为:

$("#yourFileInput")[0].files[0].fileSize;

Answer 4

使用下面检查文件的大小并清除它是否更大，

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });

Answer 5

我也发布了我的解决方案,用于ASP.NET FileUpload控件.也许有人会发现它很有用.

    $(function () {        
    $('<%= fileUploadCV.ClientID %>').change(function () {

        //because this is single file upload I use only first index
        var f = this.files[0]

        //here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes)
        if (f.size > 8388608 || f.fileSize > 8388608)
        {
           //show an alert to the user
           alert("Allowed file size exceeded. (Max. 8 MB)")

           //reset file upload control
           this.value = null;
        }
    })
});