javascript檢測上傳圖片大小程式碼例項

admin發表於2017-03-31
JavaScript

一般來說，上傳圖片的大小都是有限制的，這個時候就需要檢測圖片的大小，下面就分享一段程式碼，能夠在選中上傳圖片之後即可檢測圖片的大小，並且給出相應的提示，希望能夠給需要的朋友帶來一定的幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>javascript檢測上傳圖片的大小-螞蟻部落</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>

以上程式碼實現了檢測上傳圖片大小的效果，由於程式碼比較簡單這裡就不做介紹了。

相關文章