我有一个具有文件上传功能的表单,如果用户尝试上传的文件太大,我希望能够有一些不错的客户端错误报告,有没有办法使用 jQuery 检查文件大小,或者纯粹在客户端上或以某种方式将文件发布回服务器进行检查?
如何使用jQuery检查文件输入大小?
IT技术
javascript
jquery
file-upload
2021-01-23 10:57:41
6个回答
您实际上无权访问文件系统(例如读取和写入本地文件),但是,由于 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/
旧浏览器支持
请注意,旧浏览器会null
为前一次this.files
调用返回一个值,因此访问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;
使用下面检查文件的大小并清除它是否更大,
$("input[type='file']").on("change", function () {
if(this.files[0].size > 2000000) {
alert("Please upload file less than 2MB. Thanks!!");
$(this).val('');
}
});
我也发布了我的解决方案,用于 ASP.NETFileUpload
控件。也许有人会发现它很有用。
$(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;
}
})
});
其它你可能感兴趣的问题