国产在线视频天天综合网,九九视频精品在线

主頁 > 知識庫 > HTML5中FileReader接口使用方法實例詳解

HTML5中FileReader接口使用方法實例詳解

用來把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。FileReader接口提供了一個異步API，使用該API可以在瀏覽器主線程中異步訪問文件系統(tǒng)，讀取文件中的數(shù)據(jù)。到目前文職，只有FF3.6+和Chrome6.0+實現(xiàn)了FileReader接口。

1、FileReader接口的方法

FileReader接口有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法并不會返回讀取結(jié)果，這一結(jié)果存儲在result屬性中。

FileReader接口的方法

方法名	參數(shù)	描述
readAsBinaryString	file	將文件讀取為二進制編碼
readAsText	file,[encoding]	將文件讀取為文本
readAsDataURL	file	將文件讀取為DataURL
abort	(none)	終端讀取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕獲讀取文件時的狀態(tài)。

FileReader接口的事件

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

3、FileReader接口的使用

<script type="text/javascript">  
var result=document.getElementById("result");  
var file=document.getElementById("file");  
//判斷瀏覽器是否支持FileReader接口  
if(typeof FileReader == 'undefined'){  
    result.InnerHTML="<p>你的瀏覽器不支持FileReader接口！</p>";  
    //使選擇控件不可操作  
    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 result=document.getElementById("result");  
        //顯示文件  
        result.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 result=document.getElementById("result");  
        //顯示文件  
        result.innerHTML=this.result;  
    }  
}  
function readAsText(){  
    var file = document.getElementById("file").files[0];  
    var reader = new FileReader();  
    //將文件以文本形式讀入頁面  
    reader.readAsText(file);  
    reader.onload=function(f){  
        var result=document.getElementById("result");  
        //顯示文件  
        result.innerHTML=this.result;  
    }  
}  
</script>  
<p>  
    <label>請選擇一個文件：</label>  
    <input type="file" id="file" />  
    <input type="button" value="讀取圖像" onclick="readAsDataURL()" />  
    <input type="button" value="讀取二進制數(shù)據(jù)" onclick="readAsBinaryString()" />  
    <input type="button" value="讀取文本文件" onclick="readAsText()" />  
</p>  
<div id="result" name="result"></div>

總結(jié)

以上所述是小編給大家介紹的HTML5中FileReader接口使用方法實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

標(biāo)簽：甘南咸陽紅河營口惠州文山蘇州萍鄉(xiāng)

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5中FileReader接口使用方法實例詳解》，本文關(guān)鍵詞 HTML5,中,FileReader,接口,使用方法,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。