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

用來把文件讀入內存，並且讀取文件中的數據。 FileReader接口提供了一個異步API，使用該API可以在瀏覽器主線程中異步訪問文件系統，讀取文件中的數據。到目前文職，只有FF3.6+和Chrome6.0+實現了FileReader接口。

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

FileReader接口的方法

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

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 +' } } 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=讀取二進制數據onclick=readAsBinaryString() /> <input type=button value=讀取文本文件onclick=readAsText() /> </p> <div id=result name=result ></div>

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