js檢測上傳檔案大小和型別例項程式碼

螞蟻小編發表於2017-03-16
JS型別

在網站上傳附件的時候一般要進行格式和檔案大小驗證，下面是一段實現這樣功能的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
var isIE = /msie/i.test(navigator.userAgent) && !window.opera; 
function fileChange(target,id) { 
  var fileSize=0; 
  var filetypes=[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf"]; 
  var filepath=target.value; 
  var filemaxsize=1024*2;//2M 
  if(filepath){ 
    var isnext=false; 
    var fileend=filepath.substring(filepath.indexOf(".")); 
    if(filetypes && filetypes.length>0){ 
      for(var i =0; i<filetypes.length;i++){ 
        if(filetypes[i]==fileend){ 
          isnext = true; 
          break; 
        } 
      } 
    } 
    if(!isnext){ 
      alert("不接受此檔案型別！"); 
      target.value =""; 
      return false; 
    } 
  }
  else{ 
    return false; 
  } 
  if (isIE && !target.files) { 
    var filePath = target.value; 
    var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); 
    if(!fileSystem.FileExists(filePath)){ 
      alert("附件不存在，請重新輸入！"); 
      return false; 
    } 
    var file = fileSystem.GetFile (filePath); 
    fileSize = file.Size; 
  } 
  else { 
    fileSize = target.files[0].size; 
  } 
   
  var size = fileSize / 1024; 
  if(size>filemaxsize){ 
    alert("附件大小不能大於"+filemaxsize/1024+"M！"); 
    target.value =""; 
    return false; 
  } 
  if(size<=0){ 
    alert("附件大小不能為0M！"); 
    target.value =""; 
    return false; 
  } 
} 
window.onload=function(){
  var contractFileName=document.getElementById("contractFileName");
  contractFileName.onchange=function(){fileChange(this);}
}
</script> 
</head> 
<body> 
<input type="file" name="contractFileName" id="contractFileName"/> 
</body> 
</html>

相關文章