在使用JavaScript上传文件之前,有什么方法可以检查文件大小?
当前回答
JQuery在这个线程中提供的例子是非常过时的,谷歌没有任何帮助,所以这里是我的修订:
<script type="text/javascript">
$('#image-file').on('change', function() {
console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
});
</script>
其他回答
JQuery在这个线程中提供的例子是非常过时的,谷歌没有任何帮助,所以这里是我的修订:
<script type="text/javascript">
$('#image-file').on('change', function() {
console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
});
</script>
我使用这个脚本来验证文件类型和大小
var _validFilejpeg = [".jpeg", ".jpg", ".bmp", ".pdf"]; function validateForSize(oInput, minSize, maxSizejpeg) { //if there is a need of specifying any other type, just add that particular type in var _validFilejpeg if (oInput.type == "file") { var sFileName = oInput.value; if (sFileName.length > 0) { var blnValid = false; for (var j = 0; j < _validFilejpeg.length; j++) { var sCurExtension = _validFilejpeg[j]; if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length) .toLowerCase() == sCurExtension.toLowerCase()) { blnValid = true; break; } } if (!blnValid) { alert("Sorry, this file is invalid, allowed extension is: " + _validFilejpeg.join(", ")); oInput.value = ""; return false; } } } fileSizeValidatejpeg(oInput, minSize, maxSizejpeg); } function fileSizeValidatejpeg(fdata, minSize, maxSizejpeg) { if (fdata.files && fdata.files[0]) { var fsize = fdata.files[0].size /1024; //The files property of an input element returns a FileList. fdata is an input element,fdata.files[0] returns a File object at the index 0. //alert(fsize) if (fsize > maxSizejpeg || fsize < minSize) { alert('This file size is: ' + fsize.toFixed(2) + "KB. Files should be in " + (minSize) + " to " + (maxSizejpeg) + " KB "); fdata.value = ""; //so that the file name is not displayed on the side of the choose file button return false; } else { console.log(""); } } } <input type="file" onchange="validateForSize(this,10,5000);" >
如果你正在使用jQuery验证,你可以这样写:
$.validator.addMethod(
"maxfilesize",
function (value, element) {
if (this.optional(element) || ! element.files || ! element.files[0]) {
return true;
} else {
return element.files[0].size <= 1024 * 1024 * 2;
}
},
'The file size can not exceed 2MiB.'
);
这很简单。
const oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>
if (oFile.size > 2097152) // 2 MiB for bytes.
{
alert("File size must under 2MiB!");
return;
}
如果你将Ie的“文档模式”设置为“标准”,你可以使用简单的javascript“大小”方法来获取上传文件的大小。
将Ie的文档模式设置为标准模式:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
然后,使用'size' javascript方法获取上传文件的大小:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>
这对我很管用。
推荐文章
- 如何清除所有<div>的内容在一个父<div>?
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- React不会加载本地图像
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- JavaScript变量声明在循环外还是循环内?
- 元素在“for(…in…)”循环中排序
- 在哪里放置JavaScript在HTML文件?
- 什么时候.then(success, fail)被认为是承诺的反模式?