javascript检测上传图片大小源码实例

一般来说，上传图片的大小都是有限制的，这个时候就需要检测图片的大小，下面就分享一段代码，能够在选中上传图片之后即可检测图片的大小，并且给出相应的提示，希望能够给需要的朋友带来一定的帮助。

代码如下:

[ bootstrap ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>javascript检测上传图片的大小-51前端</title> 
<script type="text/javascript">
var maxsize=2*1024*1024;//2M
var errMsg="上传的附件文件不能超过2M！！！";
var tipMsg="您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过2M，建议使用IE、FireFox、Chrome浏览器。";
var  browserCfg={};
  
function isIE(){
  if (!!window.ActiveXObject || "ActiveXObject" in window){
    return true
  }
  else{
    return false;
  }
}
  
var ua=window.navigator.userAgent;
if(isIE()){
  browserCfg.ie = true;
}
else if(ua.indexOf("Firefox")>=1){
  browserCfg.firefox=true;
}
else if(ua.indexOf("Chrome")>=1){
  browserCfg.chrome = true;
}
function checkfile(){
  try{
    var obj_file = document.getElementById("fileuploade");
    if(obj_file.value==""){
      alert("请先选择上传文件");
      return;
    }
    var filesize=0;
    if(browserCfg.firefox||browserCfg.chrome){
      filesize = obj_file.files[0].size;
    }
    else if(browserCfg.ie){
      var obj_img=document.getElementById('tempimg');
      obj_img.dynsrc=obj_file.value;
      filesize=obj_img.fileSize;
    }
    else{
      alert(tipMsg);
      return;
    }
    if(filesize==-1){
      alert(tipMsg);
      return;
    }
    else if(filesize>maxsize){  
      alert(errMsg);
      return;
    }
    else{
      alert("文件大小符合要求");
      return;
    }
  }
  catch(e){
    alert(e);
  }
}
window.onload=function(){
  var fileuploade=document.getElementById("fileuploade");
  fileuploade.onchange=function(){
    checkfile(); 
  }
}
</script>
</head>
<body>
<img id="tempimg" dynsrc="" src="" style="display:none" />
<input type="file" name="file" id="fileuploade" size="40" />
</body>
</html>

代码描述：javascript检测上传图片大小。javascript检测上传图片大小源码实例

下载全部收藏

209 279

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册