html5中利用FileReader來讀取文件。

時間 2019-11-30

標籤 html5 html 利用 filereader 讀取文件欄目 HTML5 简体版

原文原文鏈接

利用FileReader來讀取文件的可以來實現即時預覽的效果，這個也是在html5中才有的功能。html

<!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>
    <!-- 實現即時預覽功能 
        即時：當用戶選擇完圖片以後就馬上進行預覽的處理 >> onchange
        預覽：經過文件讀取對象的readAsDataURL()完成
    -->
    <form action="">
        文件:<input type="file" name="myFile" id="myFile" onchange="getFileContent();"> <br>
        <input type="submit">
    </form>
    <img src="" alt="">


    <script>
        /*FileReader: 讀取文件內容
        * 1.readAsText():讀取文本文件(能夠使用TxT打開的文件)，返回文本字符串，默認編碼是UTF-8
        * 2.readAsBinaryString():讀取任意類型的文件。返回二進制字符串。這個方法不是用來讀取文件展現給
        用戶看，而是存儲文件。例如：讀取文件的內容，獲取二進制數據，傳遞給後臺，後臺接受了數據以後，再將
        數據存儲。
        * 3.readAsDataURL(): 讀取文件獲取一段以data開頭的字符串，這段字符串的本質就是DataURL.DataURL
        是一種將文件(這個文件通常就是指圖像或者可以嵌入到文檔的文件格式)嵌入到文檔的方案。DataURL是將資源
        轉換爲base64編碼的字符串形式，而且將這些內容直接存儲在url中>>優化網站的加載速度和執行效率。
        * abort(): 中斷讀取 */
        function getFileContent(){
            // 1.建立文件讀取對象
            var reader = new FileReader();
            /*2. 讀取文件，獲取DataURL
            2.1 說明沒有任何的返回值：void： 可是讀取完文件以後，它會將讀取的結果存儲在文件讀取對象的result中
            2.2 須要傳遞一個參數 binary large object： 文件(圖片獲取其餘能夠嵌入到文檔的類型)
            2.3 文件存儲在file表單元素的files屬性中，它是一個數組*/
            var file = document.querySelector("#myFile").files;
            reader.readAsDataURL(file[0])
            /*獲取數據
            * FileReader提供一個完整的事件模型，用來捕獲讀取文件是的狀態
            * onabort： 讀取文件中段時觸發
            * onerror： 讀取錯誤時觸發
            * onload： 文件讀取成功完成時觸發
            * onloadend： 讀取完成時觸發，不管成功仍是失敗
            * onloadstart： 開始讀取時觸發
            * onprogress： 讀取文件過程當中持續觸發
            */
            reader.onload = function(){
                // console.log(reader.result)
                // 展現
                document.querySelector("img").src = reader.result
            }
        }
    </script>
</body>

</html>