HTML5之FileReader文件讀取接口

時間 2019-11-10

標籤 html5 html filereader 文件讀取接口欄目 HTML5 简体版

原文原文鏈接

FileReader用來把文件讀入內存，而且讀取文件中的數據。
FileReader接口提供了一個異步API，使用該API能夠在瀏覽器主線程中異步訪問文件系統，讀取文件中的數據。html

一、FileReader接口的方法

FileReader接口有4個方法，其中3個用來讀取文件，另外一個用來中斷讀取。不管讀取成功或失敗，方法並不會返回讀取結果，結果存儲在result屬性中。瀏覽器

FileReader接口的方法
方法名	參數	描述
readAsBinaryString	file	將文件讀取爲二進制編碼
readAsText	file,[encoding]	將文件讀取爲文本
readAsDataURL	file	將文件讀取爲DataURL
abort	(none)	中斷讀取操做

二、FileReader接口的事件

FileReader接口包含了一套完整的事件模型，用於捕獲讀取文件時的狀態。異步

FileReader接口的事件
事件	描述
onabort	中斷
onerror	出錯
onloadstart	開始
onprogress	正在讀取
onload	成功讀取
onloadend	讀取完成，不管成功失敗

三、FileReader接口的使用

<!DOCTYPE html>
<html>
    <head>
        <title>FileReader接口</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        
    </head>
    <body>
        <p>
            <label>請選擇一個文件：</label>
            <input type="file" id="file" />
            <input type="button" value="讀取圖像" onclick="readAsDataURL()" />
            <input type="button" value="讀取二進制數據" onclick="readAsBinaryString()" />
            <input type="button" value="讀取文本文件" onclick="readAsText()" />
        </p>
        <div id="myResult"></div>
    </body>
    <script type="text/JavaScript">

        //判斷瀏覽器是否支持FileReader接口
        if(typeof FileReader == 'undefined'){
            var myResult = document.getElementById("myResult");
            var file = document.getElementById("file");
            myResult.InnerHTML = "你的瀏覽器不支持FileReader接口！";
            //使選擇控件不可操做
            file.setAttribute("disabled","disabled");
        }

        function readAsDataURL(){
            //檢驗是否爲圖像文件
            var file = document.getElementById("file").files[0];
            if(!/image\/\w+/.test(file.type)){
                alert("看清楚，這個須要圖片！");
                return false;
            }
            var reader = new FileReader();
            //將文件以Data URL形式讀入頁面
            reader.readAsDataURL(file);
            reader.onload = function(e){
                var myResult = document.getElementById("myResult");
                myResult.innerHTML = "";
                //顯示讀取結果
                myResult.innerHTML = '<img src="' + this.result +'" alt="" />';
            }
        }

        function readAsBinaryString(){
            var file = document.getElementById("file").files[0];
            var reader = new FileReader();
            //將文件以二進制形式讀入頁面
            reader.readAsBinaryString(file);
            reader.onload=function(f){
                var myResult = document.getElementById("myResult");
                myResult.innerHTML = "";
                //顯示讀取結果
                myResult.innerHTML = this.result;
            }
        }

        function readAsText(){
            var file = document.getElementById("file").files[0];
            var reader = new FileReader();
            //將文件以文本形式讀入頁面
            reader.readAsText(file);
            reader.onload=function(f){
                var myResult = document.getElementById("myResult");
                myResult.innerHTML = "";
                //顯示讀取結果
                myResult.innerHTML = this.result;
            }
        }
    </script>
</html>