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

IT技术 javascript jquery file-upload
2021-01-23 10:57:41

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

6个回答

您实际上无权访问文件系统(例如读取和写入本地文件),但是,由于 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/


旧浏览器支持

请注意,旧浏览器会null为前一次this.files调用返回一个,因此访问this.files[0]会引发异常,您应该在使用前检查文件 API 支持

@GaolaiPeng 这个错误可能是因为jQuery没有添加javascript文件(或者没有正确加载)。你有没有在head你的页面添加它
2021-03-13 10:57:41
我刚刚在 Google 上看到了这个答案,我打算用它来阻止用户发布超过给定大小的文件;因为我还在服务器端检查文件大小,所以我很高兴有一个在 IE8 中不起作用的客户端解决方案。
2021-03-14 10:57:41
@Jeroen 我同意不为 IE 工作使得它不是很多人的理想解决方案,但不会投反对票并说答案有点无用吗?我在各种各样的企业 Web 解决方案中使用了这个解决方案,这些解决方案在范围内只需要在 chrome 和/或 firefox 中工作,而一些寻找这个解决方案的人可能在同一个地方,所以这个解决方案已经足够好了.
2021-03-29 10:57:41
每个人都说这是不可能的——但它就是这样。这有效。我测试了它。
2021-04-07 10:57:41
@volumeone 这就是为什么我说你应该在我的回答中“在使用它之前检查文件 API 支持”,然后你可以相应地更改 UI。
2021-04-08 10:57:41

如果你想使用 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" }
});
@Dan 是的,文件大小属性是 HTML5 规范的一部分,因此它仅适用于现代浏览器(对于 IE,它将是 10+ 版)
2021-03-15 10:57:41
您错误地使用了该accept规则,而您应该使用该extension规则。~accept规则仅适用于 MIME 类型。 extension规则适用于文件扩展名。您还需要包含这些规则additional-methods.js文件
2021-03-16 10:57:41
补充@Sparky 的断言评论: $('#formid').validate({ rules: { inputimage: { required: true, extension: "png|jpe?g|gif", filesize: 1048576 }}, messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" } });
2021-03-27 10:57:41

这段代码:

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

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

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

$("#yourFileInput")[0].files[0].fileSize;
您的第一个代码适用于 chrome,但第二个不适用于 FireFox 最新版本。
2021-03-14 10:57:41
第一个代码适用于 IE 10、11、Edge、Chrome、Safari(Windows 版)、Brave 和 Firefox。
2021-03-14 10:57:41
第二个代码是我必须用于所有现代(2014+ 浏览器)的代码。
2021-04-04 10:57:41

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

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });
应该使用 $(this).val(null); 否则,如果没有选择正确的附件,表单似乎不再正确提交。
2021-03-17 10:57:41

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

    $(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;
        }
    })
});
您需要对 的值进行空检查,f = this.files[0]否则这将在旧浏览器上失败。例如if (f && (f.size > 8388608 || f.fileSize > 8388608))
2021-03-29 10:57:41