[HTML5] 透過File API讀取使用者上傳的檔案 Sample Code

2019-10-31

6687
0
HTML

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>

回首頁