Answers:
您实际上无权访问文件系统(例如,读取和写入本地文件),但是由于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支持。
jQuery
未添加javascript文件(或未正确加载)。您是否在head
页面的中添加了它?
如果要使用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" }
});
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" } });
这段代码:
$("#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;
}
})
});
f = this.files[0]
否则在旧版浏览器上将失败。例如if (f && (f.size > 8388608 || f.fileSize > 8388608))
在下面使用以下命令检查文件的大小,并清除文件大小是否较大,
$("input[type='file']").on("change", function () {
if(this.files[0].size > 2000000) {
alert("Please upload file less than 2MB. Thanks!!");
$(this).val('');
}
});
<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。
请尝试以下操作:
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;
}