HTML5 File API
HTML5 的 File API 只能讀取使用者上傳或透過拖曳方式丟到瀏覽器的檔案，並不能隨意讀取使用者本機端的檔案
而且File API只能讀不能寫
至於2019年爆發的Chrome File API漏洞：唔好懶懶閒！ Chrome FileReader 漏洞原來係真．零日攻擊 ，我看了一下，只要你上釣魚網站別做選擇本機檔案動作，應該就不會有事
讀取使用者上傳的文字檔↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" id="theTextFile" onchange="onLoadTextFile()" />
<textarea id="theMessageArea" rows="30" cols="40"></textarea>
<script type="text/javascript">
function onLoadTextFile() {
var theFileElem = document.getElementById("theTextFile");
// Get the File object selected by the user, and make sure it is a text file.
if (theFileElem.files.length != 0 && theFileElem.files[0].type.match(/text.*/)) {
// Create a FileReader and handle the onload and onerror events.
var reader = new FileReader();
reader.onload = function (e) {
var theMessageAreaElem = document.getElementById("theMessageArea");
theMessageAreaElem.value = e.target.result;
};
reader.onerror = function (e) {
alert("Cannot load text file");
};
// Read text file (the second parameter is optional - the default encoding is "UTF-8").
reader.readAsText(theFileElem.files[0], "utf-8");
} else {
alert("Please select a text file");
}
}
</script>
</body>
</html>
讀取使用者上傳的圖片，並轉成 Base64String 的 Data URL 顯示在畫面上↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" id="theImgFile" onchange="onLoadImgFile()" />
<img class="theImage">
<script type="text/javascript">
function onLoadImgFile() {
var theFileElem = document.getElementById("theImgFile");
// Get the File object selected by the user, and make sure it is a text file.
if (theFileElem.files.length != 0 && theFileElem.files[0].type.match(/image.*/)) {
// Create a FileReader and handle the onload and onerror events.
var reader = new FileReader();
reader.onload = function (e) {
var theImgElem = document.querySelector(".theImage");
// theImgElem.src = e.target.result; //ProgressEvent.FileReader
theImgElem.src =this.result //this為FIleReader
//console.log(this);
//Debug
//console.log(e);
//console.log("===========================")
//console.log(e.target);
//End Debug
};
reader.onerror = function (e) {
alert("Cannot load img file");
};
// Read text file (the second parameter is optional - the default encoding is "UTF-8").
reader.readAsDataURL(theFileElem.files[0]);
} else {
alert("Please select a img file");
}
}
</script>
</body>
</html>
