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

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


您实际上无法访问文件系统(例如读取和写入本地文件),但是,由于HTML5 File 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的检查的所述文件尺寸/


旧的浏览器支持

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


如果你想使用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" }
});

此代码:

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

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

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

$("#yourFileInput")[0].files[0].fileSize;
链接地址: http://www.djcxy.com/p/7253.html

上一篇: How to check file input size with jQuery?

下一篇: Can I set an unlimited length for maxJsonLength in web.config?