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


135

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

Answers:


275

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


旧版浏览器支持

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


6
每个人都说无法做到这一点-就是这样。这可行。我测试了
彼得

35
@Jeroen我同意不为IE工作对于很多人来说不是理想的解决方案,但不是不赞成投票,而是说答案没有太多用处了吗?我在各种企业Web解决方案中使用了该解决方案,这些解决方案仅需要在chrome和/或firefox中工作,有些人在寻找该解决方案可能在同一地点,因此该解决方案将足够好。
Felipe Sabino

3
我刚刚在Google上遇到了这个答案,并且将使用它来阻止用户发布超过给定大小的文件;当我还在服务器端检查文件大小时,我很高兴拥有一个客户端解决方案,该解决方案在IE8中不起作用。
史蒂夫·威尔克斯

2
@GaolaiPeng此错误可能是因为jQuery未添加javascript文件(或未正确加载)。您是否在head页面的中添加了它?
菲利佩·萨比诺

1
@volumeone这就是为什么我说您应该在答案中“使用前检查文件API支持”,然后可以相应地更改UI。
费利佩·萨比诺

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

1
@Dan是的,文件大小属性是HTML5规范的一部分,因此它仅适用于现代浏览器(对于IE,它将是10+版本)
Felipe Sabino 2014年

7
您不正确地使用了accept规则,而应该在该位置使用了extension规则。〜accept规则仅适用于MIME类型。 extension规则适用于文件扩展名。您还需要包括这些规则additional-methods.js文件
闪亮的

补充$('#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" } });
@Sparky的主张

26

这段代码:

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

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

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

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

2
您的拳头代码在chrome中有效,但第二个代码不适用于最新的FireFox。
黛博拉

第二个代码是我必须用于所有现代(2014+浏览器)的代码。
Dreamcasting

1
第一个代码适用于IE 10、11,Edge,Chrome,Safari(Windows版),Brave和Firefox。
Mashukur Ra​​hman

12

我也发布了用于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;
        }
    })
});

1
您需要空检查的值,f = this.files[0]否则在旧版浏览器上将失败。例如if (f && (f.size > 8388608 || f.fileSize > 8388608))
Gone Coding,2013年

9

在下面使用以下命令检查文件的大小,并清除文件大小是否较大,

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

1
应该使用$(this).val(null); 否则,如果不选择适当的附件,该表格似乎无法正确提交。
凯文·格拉伯

1

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

如果要使用Silverlight / Flash路线,则可以检查是否未默认将它们安装到使用常规控件的常规文件上传处理程序中。这样,如果确实安装了Silverlight / Flash,他们的经验将更加丰富。


1
<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。


0

请尝试以下操作:

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;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.