在HTML5中，我們可以使用FileReader對象來讀取INPUT-INPUT控件中選中的文件的內(nèi)容。下面是例子： <input type="file" id="f" /> <script> window.onload=function(){ //獲取INPUT-FILE控件對象 var f=document.getElementById("f"); //添加change事件，會在選擇文件時候觸發(fā) f.onchange=function(){ //創(chuàng)建一個FR對象來讀文件 var fr=new FileReader; //給FR對象添加一個load事件，會在讀到文件時候觸發(fā) fr.onload=function(){ //這個result屬性中保存的就是文件的內(nèi)容啦 console.log(fr.result); }; //讀取二進制數(shù)據(jù)到一個字符串中，或者稱為字節(jié)數(shù)組 fr.readAsBinaryString(f.files[0]); }; }; </script> 注意HTML5中的INPUT-FILE控件中使用的是儲存文件列表的files屬性，因為在HTML5中INPUT-FILE控件有個multiple屬性，這是上這個屬性就可以同時選擇多個文件了，所以需要用擬數(shù)組來保存選中的文件列表。這個例子中沒有設(shè)置multiple，這就意味著只能選擇一個文件。那么我們在文件選中以后從files屬性的0這個索引中取出這個文件對象。 關(guān)于文件對象，在早期的HTML5中支持getAs*的方法，可以直接讀取文件的內(nèi)容，但是現(xiàn)在的HTML5中廢棄了這些方法。需要使用專門的FileReader對象來讀取文件內(nèi)容。FileReader可以以不同的方式讀入文件，比如上面的例子是把文件的二進制作為字符串讀入，也就是ANSI編碼讀入。 除了笨拙的INPUT-FILE控件外，還有另外一種靈活的文件選擇方式。那就是傳說中的拖拽，使用拖拽事件可以直接獲取到拖拽到網(wǎng)頁上的文件。下面是拖拽的例子： <script> //這個是火狐的BUG，不阻止dragover的行為就無法組織drop的行為 document.ondragover=function(e){e.preventDefault()}; //直接在整個文檔上定義拖拽事件 document.ondrop=function(e){ //創(chuàng)建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，這樣就可以在文件上傳之前和服務器的文件列表比對，以防止重復上傳浪費帶寬。功能的實現(xiàn)就是這樣，具體的用途那就是項目設(shè)計師的工作了。

名稱欄目：JavaScript讀HTML5文件
網(wǎng)站URL：http://jinyejixie.com/news25/321625.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、商城網(wǎng)站、ChatGPT、用戶體驗、外貿(mào)網(wǎng)站建設(shè)、標簽優(yōu)化

廣告

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