js檢核檔案大小、檔案類型

by cactus77kiki

HTML

<div>
    <!--<label for="profile_pic"></label>-->
    <input type="file" id="profile_pic" name="profile_pic"
          accept=".jpg, .jpeg, .png, .xlsx" onchange="checkfile(this);">
    <br/>              
  </div>
  <br/>
  <div>
    
  </div>
  
  <script>  
  //檔案類型檢核
  function checkfile(sender) {
  //檔案大小
  var sizeresult = checksize(sender,Filesize["3kb"]);  
  	
  // 可接受的附檔名
  var validExts = new Array(".xlsx", ".xls", ".csv");

  var fileExt = sender.value;
  fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
  if (validExts.indexOf(fileExt) < 0) {
    alert(sizeresult+"\r\n"+"檔案類型錯誤，可接受的副檔名：" + validExts.toString()+"！");
    sender.value = null;
    return false;
  }
  else return true;
}

//檔案大小檢核
var Filesize = {
	"3kb": 307200,	//0.3mb
  "5mb": 5242880	//5mb
};

function checksize(sender,param){
	if(param){
  	var filesize = sender.files[0].size;
    if(filesize>param){
    	var paramkey = "";
    	Object.getOwnPropertyNames(Filesize).forEach(
  function (val, idx, array) {    
	if(Filesize[val] == param)
		paramkey=val;
  }
);    
  		return "檔案大小超過"+paramkey+"！";
    }    
  }else{
  	//未輸入條件，不檢核檔案大小
  	return "";
  }

}
</script>

JavaScript

/*
html限制上傳檔案類型
ref:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file

js檢核上傳檔案類型
ref:https://blog.gtwang.org/web-development/html-input-accept-attribute-tutorial/

js檢核檔案大小
ref:https://jsfiddle.net/hibbard_eu/7bjfr/

js object由value取得key資料
ref:https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames

js
*/

/*
以下是其他找到的檔案上傳方式(json-base64,formdata)
ref1:https://pjchender.blogspot.com/2019/01/js-javascript-input-file-upload-file.html
ref2:https://social.msdn.microsoft.com/Forums/vstudio/en-US/0afa9ce2-be08-42e4-8c27-900a2b813552/how-to-post-file-in-json?forum=csharpgeneral
*/