javascript檢測上傳檔案的格式和大小例項程式碼

admin發表於2017-03-15

在上傳檔案的時候一般要檢測檔案的型別或者大小,這是出於各種因素的考慮,當然一般會有兩層檢測一個是在前端,一個是在後端,下面就介紹一下如何使用js在前端檢測檔案的格式和大小。

[JavaScript] 純文字檢視 複製程式碼
var url=window.location.href,type=url.substr(url.lastIndexOf('/')+1); 
var allowType={ 
  ".bmp":1, ".png":1, ".jpeg":1, ".jpg":1, ".gif":1, 
  ".mp3":2, ".wma":2, ".wav":2, ".amr":2, 
  ".rm":3, ".rmvb":3, ".wmv":3, ".avi":3, ".mpg":3, ".mpeg":3, ".mp4":3 
}; 
var allowSize={1:2097152, 2:5242880, 3:20971520}; 
var errMsg={ 
  "0":'圖片格式不正確<br/>'
  +'音訊格式不正確<br/>'
  +'視訊格式不正確<br/>', 
  "1":'圖片格式不正確', 
  "2":'音訊格式不正確', 
  "3":'視訊格式不正確'
}; 
var errSizeMsg={ 
  '1':'圖片檔案小於2M', 
  '2':'音訊檔案小於5M', 
  '3':'視訊檔案小於20M', 
} 
function checkFileType(filename,type)
{ 
  var ext=filename.substr(filename.lastIndexOf(".")).toLowerCase(), 
  res=allowType[ext]; 
  if(type==0) 
  { 
    return !!res; 
  } 
  else
  { 
    return type == res; 
  } 
} 
function checkFileSize(target, size)
{ 
  var isIE=/msie/i.test(navigator.userAgent) && !window.opera; 
  var fileSize=0; 
  if(isIE && !target.files) 
  { 
    var filePath = target.value; 
    var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); 
    var file = fileSystem.GetFile (filePath); 
    fileSize = file.Size; 
  } 
  else
  { 
    fileSize = target.files[0].size; 
  } 
  if(parseInt(fsize) >= parseInt(size))
  { 
    return false; 
  }
  else
  { 
    return true; 
  } 
} 
function upload(obj)
{ 
  var filename = jQuery.trim(jQuery('#uploadFile').val()); 
  if (!filename || filename == "")
  { 
    alert('選擇需要上傳的檔案'); 
    return false; 
  } 
  if (!checkFileType(filename, type))
  { 
    alert('檔案格式不正確'); 
    return false; 
  } 
  var ext=filename.substr(filename.lastIndexOf(".")).toLowerCase(); 
  var res = allowType[ext]; 
  if(!checkFileSize(obj,allowSize[res]))
  { 
    alert(errSizeMsg[res]); 
    return false; 
  } 
}

相關文章