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

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

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

---

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

您实际上没有访问文件系统的权限（例如读取和写入本地文件），但是，由于HTML5文件Api规范，您确实可以访问一些文件属性，文件大小就是其中之一

对于下面的HTML

<input type="file" id="myFile" />

由于它是HTML5规范的一部分，它只适用于现代浏览器（IE需要v10），我添加了更多关于其他文件信息的详细信息和链接，您应该知道：

---

旧浏览器支持

---

请注意，旧浏览器将为以前的

this.files

调用返回一个

null

值，因此访问

this.files[0]

将引发一个异常，您应该在使用它之前使用它

如果要使用jQuery的

验证

，您可以通过创建以下方法：

$.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) 
});

此代码：

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

返回表单输入的文件大小

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

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

---

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

$（函数（）{
$（''）.change（函数（）{
//因为这是单文件上传，所以我只使用第一个索引
var f=this.files[0]
//这里我检查文件大小是否大于8MB（下面的数字以字节为单位）
如果（f.size>8388608 | | f.fileSize>8388608）
{
//向用户显示警报
警报（“超出了允许的文件大小（最大8 MB）”）
//重置文件上载控制
this.value=null；
}
})
});

这曾经是有效的，但在chrome中已经不存在了，我只是测试了上面的代码，它在ff和chrome（最新版本）中都有效。第二个[“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;
}

---

使用下面的命令检查文件的大小，并清除是否更大

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

---

每个人都说这是不可能做到的——但现在它已经做到了。这很有效。我测试过了。@Jeroen我同意不为IE工作对很多人来说都不是理想的解决方案，但不是投了反对票，说答案太没用了吗？我在很多企业web解决方案中使用了这个解决方案，这些解决方案只需要在chrome和/或firefox中使用，有些人可能也在寻找这个解决方案，所以这个解决方案已经足够好了。我刚刚在谷歌上找到了这个答案，我打算用它来阻止用户发布超过给定大小的文件；由于我还检查服务器端的文件大小，我很高兴有一个客户端解决方案在IE8中不起作用。@GaolaiPeng此错误可能是因为未添加

jQuery

javascript文件（或未正确加载）。您是否在页面的

标题中添加了它？@volumeone这就是为什么我在回答中说您应该“在使用它之前检查文件API支持”，然后您可以相应地更改UI。您的第一个代码在chrome中工作，但第二个代码在FireFox最新版本中不工作。第二个代码是我在所有现代（2014+浏览器）中必须使用的代码。第一个代码适用于IE 10、11、Edge、Chrome、Safari（Windows版本）、Brave和Firefox。@Dan是的，文件大小属性是HTML5规范的一部分，因此它只适用于现代浏览器（IE版本为10+）。您错误地使用了
接受
规则，您应该使用
扩展名
规则的位置~仅适用于MIME类型。用于文件扩展名。您还需要包括这些规则。补充@Sparky的断言注释：
$（'formid'）。验证（{rules:{inputimage:{required:true，扩展名：“png | jpe？g | gif”，文件大小：1048576}，消息：{inputimage:“文件必须是JPG、gif或png，小于1MB”}）
您需要对
f=this.files[0]
的值进行null检查，否则在旧浏览器上会失败。e、 g.
if（f&&（f.size>8388608 | | f.fileSize>8388608））
应该使用$（this.val（null）；否则，如果没有选择合适的附件，表单似乎无法正确提交。
<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>

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

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

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