JavaScript讀HTML5文件

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

讀文件就是這么簡(jiǎn)單啦，學(xué)會(huì)了讀文件我們就可以利用它做很多事情。比如在客戶(hù)端計(jì)算文件的MD5，這樣就可以在文件上傳之前和服務(wù)器的文件列表比對(duì)，以防止重復(fù)上傳浪費(fèi)帶寬。功能的實(shí)現(xiàn)就是這樣，具體的用途那就是項(xiàng)目設(shè)計(jì)師的工作了。

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

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

廣告

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