讀取file的內容,可以使用FileReader,這功能是html5才加入的,依照不同瀏覽器,支援file相關物件的method,實作完整度不同。
example:
<script type="text/javascript"> function load() { var finput = document.getElementById("file"); //取得file var f = finput.files[0]; if( f ){ var r = new FileReader(); //讀取完畢執行function r.onload = function(e) { console.log(e.target.result); }; //使用utf8邊碼讀取 //r.readAsText(f); //用base64格式讀取 //r.readAsDataURL(f); //使用二進位方式讀取file r.readAsBinaryString(f); } } </script> <input type="file" id="file" /> <a href="#" onclick="load()">Load</a>
FileReader還有一些event可以使用,例如onloadstart、onprogress、onerror….等,可以用來監聽讀取的進度,另外使用drop、dragover也可以利用div,製作一個框框,搭配FileReader,讓使用者方便拖拉檔案,直接載入檔案內容。
如果要支援IE8、IE9可直接使用現成的flash FileReader。