- HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐教程
- 田中雨
- 1113字
- 2021-03-19 20:43:08
4.4 錯(cuò)誤處理方案
大多數(shù)情況下,使用FileReader接口可以正確地讀取文件信息。但是,如果用戶(hù)選擇了某個(gè)文件后又修改了文件,使用FileReader接口再讀取文件內(nèi)容時(shí)則會(huì)發(fā)生錯(cuò)誤,這時(shí)應(yīng)該怎么辦呢?下面將簡(jiǎn)單進(jìn)行介紹。
4.4.1 產(chǎn)生錯(cuò)誤的原因
相關(guān)人員使用FileReader接口可以快速、方便地實(shí)現(xiàn)對(duì)文件的讀取,但是,在讀取文件的過(guò)程中,可能會(huì)由于各種原因而出現(xiàn)各種類(lèi)型的錯(cuò)誤和異常。這些原因可能有多個(gè)方面的,因此,如下總結(jié)出了一些常見(jiàn)的因素。
(1)訪(fǎng)問(wèn)某個(gè)文件的過(guò)程中,該文件被移動(dòng)或者刪除,或者被其他應(yīng)用程序修改,這種情況非常常見(jiàn)。
(2)由于權(quán)限原因,無(wú)法讀取文件的數(shù)據(jù)信息。
(3)文件出于案例因素的考慮,在讀取文件時(shí)返回一個(gè)無(wú)效的數(shù)據(jù)信息。
(4)讀取文件太大,超出URL網(wǎng)址的限制,將無(wú)法返回一個(gè)有效的數(shù)據(jù)信息。
(5)在讀取文件的過(guò)程中,應(yīng)用程序本身觸發(fā)了中止讀取的事件。
4.4.2 FileError接口
4.4.1節(jié)所介紹的因素所導(dǎo)致的異常和錯(cuò)誤很可能會(huì)在讀取文件的過(guò)程中出現(xiàn),針對(duì)這些錯(cuò)誤和異常,HTML 5提供了一種解決方案。
在異步讀取文件的過(guò)程中,如果出現(xiàn)錯(cuò)誤和異常則使用FileError接口,該接口主要用于異步提示錯(cuò)誤。可以通過(guò)FileError接口獲取錯(cuò)誤與異常所產(chǎn)生的錯(cuò)誤代碼,再根據(jù)返回的錯(cuò)誤代碼具體分析發(fā)生錯(cuò)誤與異常的原因,如表4-4所示為FileError接口的錯(cuò)誤代碼。
表4-4 FileError接口的錯(cuò)誤代碼

4.4.3 錯(cuò)誤處理練習(xí)
4.4.1和4.4.2節(jié)分別介紹了錯(cuò)誤與異常所產(chǎn)生的原因以及解決辦法,本節(jié)將通過(guò)一個(gè)簡(jiǎn)單的練習(xí)演示錯(cuò)誤的處理。
【練習(xí)8】
在本次練習(xí)中,用戶(hù)在頁(yè)面中選擇了要讀取的文件內(nèi)容后,單擊按鈕對(duì)文件進(jìn)行讀取操作,在腳本函數(shù)中添加與錯(cuò)誤和異常有關(guān)的代碼,這些代碼能夠捕獲信息。
(1)在頁(yè)面中添加用于上傳文本文件的file類(lèi)型的文件框,然后添加執(zhí)行上傳操作的button類(lèi)型的普通按鈕。代碼如下。
選擇文本文件:<input type="file" id="selFile" /> <input type="button" id="btnGetFileInfo" value="上傳" onClick="GetFile()" /><br/><br/> <font color="#FF0000">(必須是文本文件,如.txt文件和.html文件)</font>
(2)在網(wǎng)頁(yè)中單擊【上傳】按鈕時(shí)觸發(fā)Click事件調(diào)用JavaScript腳本中的GetFile()函數(shù)。該函數(shù)的代碼首先判斷用戶(hù)是否上傳文件,如果已經(jīng)上傳文件則判斷文件的類(lèi)型是否符合要求,如果符合要求則添加執(zhí)行顯示內(nèi)容的操作。另外,添加捕獲錯(cuò)誤和異常信息的onerror事件,在該事件中通過(guò)error.code屬性獲取錯(cuò)誤代碼編號(hào)。代碼如下。
function GetFile() { var file = document.getElementById("selFile").files[0]; if(file==null || file=='undefined'){ //如果用戶(hù)沒(méi)有選擇文件,彈出提示 alert("您還沒(méi)有選擇文件,請(qǐng)選擇文件。"); }else{ var txtType = /text.*/; if (!file.type.match(txtType)) { //判斷上傳的文件類(lèi)型是否匹配 alert(file.name+"不是文本文件,請(qǐng)重新選擇文件進(jìn)行上傳。"); return; } var reader = new FileReader(); reader.readAsText(file,"gb2312"); reader.onload = function(e){ //添加onload事件 document.getElementById("showInfo").innerHTML = this.result; } reader.onerror=function(res){ //添加onerror事件 var num=res.target.error.code; document.getElementById('showInfo').innerHTML="文件無(wú)法顯示:"; if(num==1){ document.getElementById('showInfo').innerHTML+="無(wú)法找到或原文件已被修改!"; }else if(num==2){ document.getElementById('showInfo').innerHTML+="無(wú)法獲取數(shù)據(jù)文件!"; }else if(num==3){ document.getElementById('showInfo').innerHTML+="中止文件讀取的過(guò)程!"; }else if(num==4){ document.getElementById('showInfo').innerHTML+="無(wú)權(quán)讀取數(shù)據(jù)文件!"; }else if(num==5){ document.getElementById('showInfo').innerHTML+="讀取的文件太大!"; } } } }
(3)運(yùn)行頁(yè)面選擇文件后再更改文件的名稱(chēng)進(jìn)行測(cè)試,效果如圖4-23所示。

圖4-23 錯(cuò)誤處理練習(xí)效果
- JSP網(wǎng)站開(kāi)發(fā)詳解
- Bootstrap響應(yīng)式Web開(kāi)發(fā)
- jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程(慕課版·第2版)
- Vue.js Web開(kāi)發(fā)案例教程(在線(xiàn)實(shí)訓(xùn)版)
- 網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)從入門(mén)到精通
- HTML+CSS+JavaScript網(wǎng)頁(yè)制作案例教程(第2版)
- Photoshop網(wǎng)頁(yè)設(shè)計(jì)從入門(mén)到精通
- CSS圖鑒
- 淘寶店鋪?lái)?yè)面設(shè)計(jì)與裝修實(shí)戰(zhàn)教程
- Premiere Pro CS6多功能教材
- Photoshop熱門(mén)手機(jī)APP與網(wǎng)頁(yè)游戲界面設(shè)計(jì)從入門(mén)到精通
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)培訓(xùn)教程
- 巧學(xué)巧用Dreamweaver CS6制作網(wǎng)頁(yè)
- 秩序之美:網(wǎng)頁(yè)中的網(wǎng)格設(shè)計(jì)
- 從零開(kāi)始讀懂Web3