解析HTML5中FileReader介面使用方法

FileReader介面提供了一個非同步API，使用該API可以在瀏覽器主執行緒中非同步存取檔案系統，讀取檔案中的數據，以下透過本文給大家分享HTML5中FileReader介面使用方法實例詳解，有興趣的朋友一起看看吧

用來把文件讀入內存，並且讀取文件中的資料。 FileReader介面提供了一個非同步API，使用該API可以在瀏覽器主執行緒中非同步存取檔案系統，讀取檔案中的資料。到目前文職，只有FF3.6+和Chrome6.0+實作了FileReader介面。

1、FileReader介面的方法

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

FileReader介面的方法

#方法名稱	參數	描述
readAsBinaryString	file	將檔案讀取為二進位編碼
#readAsText	file,[encoding]	將檔案讀取為文字
readAsDataURL	# file	將檔案讀取為DataURL
abort	(none)	終端機讀取操作

2、FileReader介面事件

#FileReader介麵包含了一套完整的事件模型，用於擷取讀取文件時的狀態。

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 == &#39;undefined&#39;){  
    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=&#39;<img src="&#39; + this.result +&#39;" alt="" />&#39;;  
    }  
}  
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>  
<p id="result" name="result"></p>

以上是解析HTML5中FileReader介面使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！