本文介绍如何使用JavaScript在前端实现上传文件的类型与大小校验。通过获取文件后缀名判断是否为指定格式,并利用ActiveXObject或files API读取文件大小,从而在提交前拦截不符合要求的文件。
JavaScript实现文件类型与大小校验
具体实现代码示例如下:
//判断照片大小
function getPhotoSize(obj){
photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
if(photoExt!='.jpg'){
alert("请上传后缀名为jpg的照片!");
return false;
}
var fileSize = 0;
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
if (isIE && !obj.files) {
var filePath = obj.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
}else {
fileSize = obj.files[0].size;
}
fileSize=Math.round(fileSize/1024*100)/100; //单位为KB
if(fileSize>=10){
alert("照片最大尺寸为10KB,请重新上传!");
return false;
}
}
在JSP页面中,可以通过以下HTML元素触发校验逻辑:
<input type="file" id="imgFile" name="upload" style="width:150px;" onchange="getPhotoSize(this)"/>
以上即为使用JavaScript进行文件格式及大小校验的完整实现,供参考使用。