HTML+CSS网页设计实践教程
上QQ阅读APP看书,第一时间看更新

4.4 错误处理方案

大多数情况下,使用FileReader接口可以正确地读取文件信息。但是,如果用户选择了某个文件后又修改了文件,使用FileReader接口再读取文件内容时则会发生错误,这时应该怎么办呢?下面将简单进行介绍。

4.4.1 产生错误的原因

相关人员使用FileReader接口可以快速、方便地实现对文件的读取,但是,在读取文件的过程中,可能会由于各种原因而出现各种类型的错误和异常。这些原因可能有多个方面的,因此,如下总结出了一些常见的因素。

(1)访问某个文件的过程中,该文件被移动或者删除,或者被其他应用程序修改,这种情况非常常见。

(2)由于权限原因,无法读取文件的数据信息。

(3)文件出于案例因素的考虑,在读取文件时返回一个无效的数据信息。

(4)读取文件太大,超出URL网址的限制,将无法返回一个有效的数据信息。

(5)在读取文件的过程中,应用程序本身触发了中止读取的事件。

4.4.2 FileError接口

4.4.1节所介绍的因素所导致的异常和错误很可能会在读取文件的过程中出现,针对这些错误和异常,HTML 5提供了一种解决方案。

在异步读取文件的过程中,如果出现错误和异常则使用FileError接口,该接口主要用于异步提示错误。可以通过FileError接口获取错误与异常所产生的错误代码,再根据返回的错误代码具体分析发生错误与异常的原因,如表4-4所示为FileError接口的错误代码。

表4-4 FileError接口的错误代码

4.4.3 错误处理练习

4.4.1和4.4.2节分别介绍了错误与异常所产生的原因以及解决办法,本节将通过一个简单的练习演示错误的处理。

【练习8】

在本次练习中,用户在页面中选择了要读取的文件内容后,单击按钮对文件进行读取操作,在脚本函数中添加与错误和异常有关的代码,这些代码能够捕获信息。

(1)在页面中添加用于上传文本文件的file类型的文件框,然后添加执行上传操作的button类型的普通按钮。代码如下。

    选择文本文件:<input type="file" id="selFile" />&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" id="btnGetFileInfo" value="上传" onClick="GetFile()" /><br/><br/>
    <font color="#FF0000">(必须是文本文件,如.txt文件和.html文件)</font>

(2)在网页中单击【上传】按钮时触发Click事件调用JavaScript脚本中的GetFile()函数。该函数的代码首先判断用户是否上传文件,如果已经上传文件则判断文件的类型是否符合要求,如果符合要求则添加执行显示内容的操作。另外,添加捕获错误和异常信息的onerror事件,在该事件中通过error.code属性获取错误代码编号。代码如下。

    function GetFile()
    {
        var file = document.getElementById("selFile").files[0];
        if(file==null || file=='undefined'){    //如果用户没有选择文件,弹出提示
            alert("您还没有选择文件,请选择文件。");
        }else{
            var txtType = /text.*/;
            if (!file.type.match(txtType)) {    //判断上传的文件类型是否匹配
                alert(file.name+"不是文本文件,请重新选择文件进行上传。");
                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="文件无法显示:";
                if(num==1){
                    document.getElementById('showInfo').innerHTML+="无法找到或原文件已被修改!";
                }else if(num==2){
                    document.getElementById('showInfo').innerHTML+="无法获取数据文件!";
                }else if(num==3){
                    document.getElementById('showInfo').innerHTML+="中止文件读取的过程!";
                }else if(num==4){
                    document.getElementById('showInfo').innerHTML+="无权读取数据文件!";
                }else if(num==5){
                    document.getElementById('showInfo').innerHTML+="读取的文件太大!";
                }
            }
        }
    }

(3)运行页面选择文件后再更改文件的名称进行测试,效果如图4-23所示。

图4-23 错误处理练习效果