HTML5 FileAPI图文代码分享

在html5中，提供了一个关于文件操作的api，通过这个api，对于从web页面上访问本地文件系统的相关处理变得十分简单。到目前为止只有部分浏览器对它提供支持。

1.FileList对象和File对象

　　FileList对象表示用户选择的文件列表，在HTML4中file控件内只允许放置一个文件，但在HTML5中通过添加multiple属性，file控件内允许放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList就是这些file对象的列表，代表用户选择的所有文件。file对象有两个属性，一个是name，代表文件名不包含文件的路径；一个是lastModifiedDate，表示文件最后被修改的日期。

2.Blob对象

　　提到Blob对象，估计有人会想起OracleDB中Blob字段，意义上有些类似。HTML5中Blob表示二进制原始数据，它提供一个slice()方法，可以通过这个方法访问到字节内部的原始数据块。事实上，上面提到的file对象继承了Blob对象。

立即学习“前端免费学习笔记（深入）”；

　　Blob对象的两个属性，size：表示一个对象的字节长度。type：表示一个对象的MIME类型，如若是未知类型返回空字符串。

function showFileInfo(){
                var file = document.getElementById('file').files[0];
                var size = document.getElementById('fileType');
                var type = document.getElementById('fileSize');
                size.innerHTML = file.size;
                type.innerHTML = file.type;
            }

　　对于图像类型的文件，Blob对象的type属性都是以image/开头，可以利用这个特性对用户选择的文件类型做判断。

function showFileInfo(){
                var file = document.getElementById('file').files[0];
                if(checkImage(file)){
                var size = document.getElementById('fileType');
                var type = document.getElementById('fileSize');
                size.innerHTML = file.size;
                type.innerHTML = file.type;
                }
                else{
                    return ;
                }
            }
            function checkImage(file){
                if(!/img\/\w+/.test(file.type)){
                    alert(file.name + "不是图片");
                    return false;
                }
                return true;
            }

　　另外，file控件在HTML5标准中添加了accept属性，用来限制接受的文件类型，但目前各浏览器对齐支持都仅限于在打开文件选择窗口时默认的选择图像文件而已，如果选择其他类型，控件也能接受。

3.FileReader接口

抖云猫AI论文助手

一款AI论文写作工具，最快 2 分钟，生成 3.5 万字论文。论文可插入表格、代码、公式、图表，依托自研学术抖云猫大模型，生成论文具备严谨的学术专业性。

下载

　　3.1接口方法

　　FileReader接口提供了四个方法，其中3个用来读取文件，1个用来中断文件的读取。

需要注意的是，无论读取成功还是失败，方法都不会返回读取结果，结果返回在result属性中。

　　3.2接口事件

　　FileReader接口提供了一套完整的事件模型，用于捕获读取文件时的状态。

　　3.3实例