如何用jQuery检查文件输入大小？-Java 学习之路

121

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

8 回答

255
您实际上无权访问文件系统（例如读取和写入本地文件），但是，由于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），我添加了here更多详细信息和有关您应该知道的其他文件信息的链接：http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

Old browsers support

请注意，旧浏览器将为之前的 this.files 调用返回 null 值，因此访问 this.files[0] 将引发异常，在使用之前应该check for File API support
回复于 2024-04-16T13:09:36+08:00

如果你想使用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" }
});

回复于 2024-04-16T13:09:36+08:00

2
这段代码：
```
$("#yourFileInput")[0].files[0].size;
```
返回表单输入的文件大小 .

在FF 3.6及更高版本中，此代码应为：
```
$("#yourFileInput")[0].files[0].fileSize;
```
回复于 2024-04-16T13:09:36+08:00

我也发布了我的解决方案，用于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;
        }
    })
});

回复于 2024-04-16T13:09:36+08:00

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

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

回复于 2024-04-16T13:09:36+08:00

0

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

如果您想要使用Silverlight / Flash路由，您可以检查它们是否未安装为默认使用常规控件的常规文件上载处理程序 . 这样，如果确实安装了Silverlight / Flash，他们的体验会更丰富一些 .

回复于 2024-04-16T13:09:36+08:00

请试试这个：

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

回复于 2024-04-16T13:09:36+08:00

<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”]现在是第一个孩子 .

回复于 2024-04-16T13:09:36+08:00

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

8 回答

相关问题