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

小开

你可以使用 Flash 或 Silverlight 进行这种检查，但不能使用 Javascript。Javascript 沙箱不允许访问文件系统。大小检查将需要做服务器端后，它已经上传。

如果你想走 Silverlight/Flash 路线，你可以检查如果他们没有默认安装到一个普通的文件上传处理程序，使用正常的控件。这样，如果确实安装了 Silverlight/Flash，他们的体验会更丰富一些。

小开

最佳答案

您实际上不能访问文件系统(例如读写本地文件) ，但是，由于 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-checking-the-file-size/

旧浏览器支持

请注意，旧的浏览器将返回以前的 this.files调用的 null值，因此访问 this.files[0]将引发一个异常，您应该在使用它之前使用检查文件 API 支持

小开

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

小开

这个代码:

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

小开

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

这曾经工作，但它不在铬不再，我只是测试了上面的代码，它工作在关闭和铬(最新)。第二个[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('');
}
});

小开

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