HTML5中使用readAsText方法讀取文字檔案
阿新 • • 發佈：2019-01-25
原始碼：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文件</title> <script type="text/javascript"> function readAsText() { var file=document.getElementById("file").files[0]; var reader=new FileReader(); reader.readAsText(file); reader.onload=function(e) { var result=document.getElementById("result"); result.innerHTML=this.result; } } </script> </head> <body> 請選擇文字檔案:<input type="file" id="file" /><input type="button" value="顯示文字檔案" onclick="readAsText();"/> <div name="result" id="result"> <!--這裡顯示檔案內容--> </div> </body> </html>
當button的onclick事件觸發的時候，呼叫readAsText函式，首先獲取file物件，然後建立一個FileReader例項，並且呼叫readAsText方法讀取檔案。在例項的onload事件中，獲取成功讀取到的檔案內容，顯示在頁面中，這樣就能成功的讀取文字檔案的內容。