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

javascript jquery file-upload

2022-08-30 03:07:47

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

答案 1

您实际上无权访问文件系统（例如读取和写入本地文件），但是，由于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-checking-the-file-size/

旧浏览器支持

请注意，旧浏览器将返回上一个调用的值，因此访问将引发异常，您应该在使用之前检查文件 API 支持nullthis.filesthis.files[0]

答案 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" }
});