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

Question

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

Answer 1

您实际上没有访问文件系统的权限（例如，读取和写入本地文件），但是，由于HTML5FileApi规范，您确实可以访问某些文件属性，并且文件大小是其中之一。

对于下面的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）

旧版浏览器支持

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