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

【问题标题】：How to check file input size with jQuery?如何使用 jQuery 检查文件输入大小？
【发布时间】：2010-12-08 18:10:28
【问题描述】：

我有一个具有文件上传功能的表单，如果用户尝试上传的文件太大，我希望能够有一些很好的客户端错误报告，有没有办法使用 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），我添加了 here 更多详细信息和有关您应该知道的其他文件信息的链接：http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

旧浏览器支持

请注意，旧浏览器会为之前的 this.files 调用返回一个 null 值，因此访问 this.files[0] 会引发异常，您应该在使用之前 check for File API support

【讨论】：

每个人都说这做不到——但它就在这里。这行得通。我测试过了。
@Jeroen 我同意不为 IE 工作使它不是很多人的理想解决方案，但不是投反对票并说答案没用有点太多了吗？我在各种各样的企业 Web 解决方案中使用了这个解决方案，这些解决方案的范围内只需要在 chrome 和/或 firefox 中工作，并且一些正在寻找这个解决方案的人可能在同一个地方，所以这个解决方案就足够好了.
我刚刚在 Google 上看到了这个答案，我打算用它来阻止用户发布超过给定大小的文件；因为我还在服务器端检查文件大小，所以我很高兴有一个在 IE8 中不起作用的客户端解决方案。
@GaolaiPeng 这个错误可能是因为jQuery javascript文件没有添加（或者没有正确加载）。您是否已将其添加到您页面的head 中？
@volumeone 这就是为什么我说你应该在我的回答中“在使用它之前检查文件 API 支持”，然后你可以相应地更改 UI。

【解决方案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" }
});

【讨论】：

@Dan 是的，文件大小属性是 HTML5 规范的一部分，所以它只适用于现代浏览器（对于 IE，它应该是 10+ 版本）
您错误地使用了accept 规则，而您应该使用extension 规则。 ~ The accept rule 仅适用于 MIME 类型。 The extension rule 用于文件扩展名。您还需要为这些规则添加the additional-methods.js file。
补充@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" } });

【解决方案3】：

这段代码：

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

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

在 FF 3.6 及更高版本上，此代码应为：

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

【讨论】：

您的第一个代码在 chrome 中有效，但第二个代码在最新的 FireFox 中无效。
第二个代码是我必须用于所有现代（2014 年以上浏览器）的代码。
第一个代码适用于 IE 10、11、Edge、Chrome、Safari（Windows 版）、Brave 和 Firefox。

【解决方案4】：

使用下方检查文件大小，如果更大则清除，

    $("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);否则，如果没有选择正确的附件，表单似乎不再正确提交。

【解决方案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;
        }
    })
});

【讨论】：

您需要对f = this.files[0] 的值进行空值检查，否则这将在旧浏览器上失败。例如if (f && (f.size > 8388608 || f.fileSize > 8388608))

【解决方案6】：

<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
</form>
<button onclick="checkSize();"></button>
<script>
    function checkSize(){
        var size = $('#uploadForm')["0"].firstChild.files["0"].size;
        console.log(size);
    }
</script>

如果您不打算通过标准 ajax / html5 方法提交表单，我发现这是最简单的方法，但它当然适用于任何东西。

注意事项：

var size = $('#uploadForm')["0"]["0"].files["0"].size;

这曾经有效，但它不再适用于 chrome，我刚刚测试了上面的代码，它在 ff 和 chrome 中都有效（最新）。第二个 ["0"] 现在是 firstChild。

【讨论】：

【解决方案7】：

请试试这个：

var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;

if (sizeInKB >= sizeLimit) {
    alert("Max file size 30KB");
    return false;
}

【讨论】：

【解决方案8】：

您可以使用 Flash 或 Silverlight 进行此类检查，但不能使用 Javascript。 javascript 沙箱不允许访问文件系统。上传后需要在服务器端进行大小检查。

如果您想采用 Silverlight/Flash 路线，您可以检查它们是否未安装为默认使用普通控件的常规文件上传处理程序。这样，如果确实安装了 Silverlight/Flash，他们的体验会更加丰富。

【讨论】：