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

Question

我有一个带有文件上传功能的表单，如果用户试图上传的文件太大，我想要实现一些漂亮的客户端错误报告，是否有办法使用jQuery检查文件大小，无论是在纯客户端上还是通过将文件发送回服务器进行检查?

- Jimmy

Answer 1

你实际上没有访问文件系统的权限（例如读写本地文件），但是由于HTML5文件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支持后再使用它。

- Felipe Sabino

---

每个人都说这是不可能的，但它却存在着。这个方法有效，我已经测试过了。 - Peter

我同意 @Jeroen 的看法，不支持 IE 浏览器使得这个方案对很多人来说并不是理想的解决方案，但是给予负评并称该答案毫无用处是否有些过分了呢？我在许多企业级 Web 解决方案中使用了这个方案，这些方案只需要在 Chrome 和/或 Firefox 中正常工作，而一些寻找此类方案的人可能也有相同的需求，所以这个方案已经足够好了。 - Felipe Sabino

我刚在Google上看到了这个答案，打算用它来阻止用户上传超过给定大小的文件；由于我也会在服务器端检查文件大小，所以我很高兴有一个不适用于IE8的客户端解决方案。 - Steve Wilkes

@GaolaiPeng 这个错误可能是因为 jQuery 的 JavaScript 文件没有被添加（或者没有被正确加载）。你在页面的 head 中添加了它吗？ - Felipe Sabino

@volumeone，这就是为什么我在我的回答中说你应该“在使用它之前检查文件API支持”，然后你可以相应地更改UI。 - Felipe Sabino

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

- Naoise Golden

---

@Dan 是的，文件大小属性是HTML5规范的一部分，因此它只适用于现代浏览器（对于IE来说，版本应该是10+）。 - Felipe Sabino

您错误地使用了 accept 规则，应该使用 extension 规则。 accept 规则仅适用于 MIME 类型。 extension 规则 用于文件扩展名。您还需要包含 additional-methods.js 文件 来使用这些规则。 - Sparky

补充@Sparky的自信评论：$('#formid').validate({ rules: { inputimage: { required: true, extension: "png|jpe?g|gif", filesize: 1048576 }}, messages: { inputimage: "文件必须是JPG，GIF或PNG格式，小于1MB" } }); - victorf

Answer 3

这段代码：

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

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

在Firefox 3.6及以上版本中，应该使用以下代码：

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

- jeferod83

---

你的第一段代码可以在Chrome中运行，但第二段无法在最新版的FireFox中运行。 - Débora

那个第二段代码是我不得不用于所有现代（2014年及以后的）浏览器的。 - Dreamcasting

第一段代码适用于IE 10、11、Edge、Chrome、Safari（Windows版本）、Brave和Firefox。 - Mashukur Rahman

Answer 4

使用以下方法检查文件大小，如果超过限制则进行清理：

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });

- Umesh Patil

---

应该使用 $(this).val(null); 否则，如果没有选择正确的附件，表单似乎无法正确提交。 - Kevin Grabher

Answer 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;
        }
    })
});

- Besnik Kastrati

---

你需要对 f = this.files[0] 的值进行空值检查，否则在旧版浏览器上会出现错误。例如：if (f && (f.size > 8388608 || f.fileSize > 8388608))。 - iCollect.it Ltd

Answer 6

请尝试这个：

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;
}

- Bablu Ahmed

Answer 7

<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上不行了。我刚刚测试了上面的代码，在Firefox和Chrome（最新版本）中都可以运行。第二个["0"]现在是firstChild。

- Dillon Burnett

Answer 8

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

如果要使用Silverlight / Flash方法，则可以检查是否未安装并将其默认为使用正常控件的常规文件上传处理程序。 这样，如果他们安装了Silverlight / Flash，他们的体验将更加丰富。

- Kelsey

Answer 9

HTML 代码：

<input type="file" id="upload" class="filestyle" onchange="SizeCheck();"/>

JavaScript 函数：

function SizeCheck() {
            var fileInput = document.getElementById('upload').files;
            var fsize = fileInput[0].size;
            var file = Math.round((fsize / 1024));
            if (file >= 10240) {     //10MB
               //Add Alert Here If 
                $('#upload_error').html("* File Size < 10MB");
            }
            else {
                $('#invoice_error').html("");
            }
        }

- iamnishantchandra

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 10

<script>
  if (Math.round((document.getElementById('Your_input_id').files[0].size / 1024)>= 1024) { //2MB
    $("#your_error_id").html("File Size < 1MB");
    $("#your_error_id").css("color", "#dd4b39");
    $("#Your_input_id").val('');
    return false;
  }
</script>

- Aarjaycreation

---

你的回答可以通过添加更多关于代码的信息以及它如何帮助提问者来改进。 - Tyler2P