HTML5之FileReader的簡易使用

時間 2019-11-08

標籤 html5 html filereader 簡易使用欄目 HTML5 简体版

原文原文鏈接

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

一、FileReader接口的方法瀏覽器

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

方法名:	參數:	描述:
readAsDataURL	file	將文件讀取爲DataURL(通常讀取圖片)
readAsText	ile,[encoding]	將文件讀取爲文本
readAsBinaryString	file	將文件讀取爲二進制編碼
abort	(none)	終端讀取操做

二、FileReader接口事件this

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

三、FileReader接口的使用編碼

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
    <div id="out"></div>
    <img src="" alt="" id="img">
    <script>
        var file = document.getElementById('file');
        var out = document.getElementById('out');//文件展現的1地方 var img = document.getElementById('img');//圖片顯示的地方

        file.onchange = function(event){ //監聽文件的改變 var file = event.target.files[0]; //獲取到文件的全部信息
            console.log(file)
            var type = 'defautl';

            var reader = new FileReader(); //new一個文件讀取的對象（首先要判斷你的瀏覽器是否支持這個方法） //判斷文件類型
            if(/image/.test(file.type)){ //判斷文件的類型
                type = 'image' //圖片
                reader.readAsDataURL(file);
            }else{
                type = 'text'; //其餘非圖片文件
                reader.readAsText(file);
            }
 
            reader.onload = function() { //成功的回調 var html = '';
                switch(type){
                    case "image"://圖片的顯示
                        img.src = this.result; 
                        break;
                    case "text"://文件的顯示
                        html  = this.result;
                        out.innerHTML = html;
                        break;
                }
                
            }
            
        }
    </script>
</body>
</html>