JavaScript实现文件类型与大小校验
作者:异步漫步时间:2026-10-30 15:10:21浏览:364
本文介绍如何使用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进行文件格式及大小校验的完整实现,供参考使用。
作者最新文章
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
JS对象数组转字符串为什么推荐用JSON.stringify()
2026-11-05 09:40:31
