在使用JavaScript上传文件之前,有什么方法可以检查文件大小?
当前回答
我使用这个脚本来验证文件类型和大小
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:
$(" #图像文件”)。On ('change', function() { console.log('This file size is: ' + This .files[0]. log)size / 1024 / 1024 + "MiB"); }); < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js " > < /脚本> <form action="upload" enctype="multipart/form-data" method="post"> 上传图片: <input id="image-file" type="file" name="file" /> <input type="submit" value="Upload" /> > < /形式
如果你正在使用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.'
);
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>
我使用了一个主要的Javascript函数,这个函数是我在Mozilla开发者网络站点https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications上找到的,还有一个使用AJAX的函数,并根据我的需要进行了修改。它接收到一个文档元素id,关于在我的html代码中我想写文件大小的地方。
<Javascript>
function updateSize(elementId) {
var nBytes = 0,
oFiles = document.getElementById(elementId).files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
}
return sOutput;
}
</Javascript>
<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>
<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>
干杯
我做了这样的东西:
$(" #图像文件”)。On ('change', function() { Var numb = $(this)[0].files[0]。Size / 1024 / 1024; numb = number . tofixed (2); If (numb > 2) { alert('to big,最大值为2MiB。你的文件大小是:' + numb + ' MiB'); }其他{ alert('it okey,你的文件有' + numb + 'MiB') } }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js " > < /脚本> <input type="file" id="image-file">
推荐文章
- 同步和异步编程(在node.js中)的区别是什么?
- 在d3.js中调整窗口大小时调整svg的大小
- 如何将两个字符串相加,就好像它们是数字一样?
- 绑定多个事件到一个监听器(没有JQuery)?
- 在JavaScript中将JSON字符串解析为特定对象原型
- 将字符串“true”/“false”转换为布尔值
- 如何使用JavaScript代码获得浏览器宽度?
- event.preventDefault()函数在IE中无法工作
- indexOf()和search()的区别是什么?
- 错误:'types'只能在.ts文件中使用- Visual Studio Code使用@ts-check
- React-Native:应用程序未注册错误
- LoDash:从对象属性数组中获取值数组
- src和dist文件夹的作用是什么?
- jQuery UI对话框-缺少关闭图标
- 如何使用AngularJS获取url参数