JavaScript讀HTML5文件

在HTML5中，我們可以使用FileReader對象來讀取INPUT-INPUT控件中選中的文件的內容。下面是例子： <input type="file" id="f" /> <script> window.onload=function(){ //獲取INPUT-FILE控件對象 var f=document.getElementById("f"); //添加change事件，會在選擇文件時候觸發 f.onchange=function(){ //創建一個FR對象來讀文件 var fr=new FileReader; //給FR對象添加一個load事件，會在讀到文件時候觸發 fr.onload=function(){ //這個result屬性中保存的就是文件的內容啦 console.log(fr.result); }; //讀取二進制數據到一個字符串中，或者稱為字節數組 fr.readAsBinaryString(f.files[0]); }; }; </script> 注意HTML5中的INPUT-FILE控件中使用的是儲存文件列表的files屬性，因為在HTML5中INPUT-FILE控件有個multiple屬性，這是上這個屬性就可以同時選擇多個文件了，所以需要用擬數組來保存選中的文件列表。這個例子中沒有設置multiple，這就意味著只能選擇一個文件。那么我們在文件選中以后從files屬性的0這個索引中取出這個文件對象。 關于文件對象，在早期的HTML5中支持getAs*的方法，可以直接讀取文件的內容，但是現在的HTML5中廢棄了這些方法。需要使用專門的FileReader對象來讀取文件內容。FileReader可以以不同的方式讀入文件，比如上面的例子是把文件的二進制作為字符串讀入，也就是ANSI編碼讀入。 除了笨拙的INPUT-FILE控件外，還有另外一種靈活的文件選擇方式。那就是傳說中的拖拽，使用拖拽事件可以直接獲取到拖拽到網頁上的文件。下面是拖拽的例子： <script> //這個是火狐的BUG，不阻止dragover的行為就無法組織drop的行為 document.ondragover=function(e){e.preventDefault()}; //直接在整個文檔上定義拖拽事件 document.ondrop=function(e){ //創建FR對象，這個在上面的例子中介紹過了 var fr=new FileReader; fr.onload=function(){ console.log(fr.result); }; //使用FR對象以utf-8的編碼讀取一個文本文件 fr.readAsText(e.dataTransfer.files[0],"utf-8"); //阻止默認行為 //文件拖拽會被有些瀏覽器解析為“打開” e.preventDefault(); }; </script>

讀文件就是這么簡單啦，學會了讀文件我們就可以利用它做很多事情。比如在客戶端計算文件的MD5，這樣就可以在文件上傳之前和服務器的文件列表比對，以防止重復上傳浪費帶寬。功能的實現就是這樣，具體的用途那就是項目設計師的工作了。

名稱欄目：JavaScript讀HTML5文件
網站URL：http://m.kartarina.com/news25/321625.html

成都網站建設公司_創新互聯，為您提供網站內鏈、商城網站、ChatGPT、用戶體驗、外貿網站建設、標簽優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯