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进行文件格式及大小校验的完整实现,供参考使用。

作者最新文章