HTML5文件读取FileReader及文件读取模块的封装

川长思鸟来 2024-04-18 03:12 69阅读 0赞

## FileReader ##

## 创建 ##

要想使用读取文件功能  
同样需要实例化FileReader对象

var fr = new FileReader();

它为我们提供了一些接口方法和事件

## 方法 ##

通过实例对象可以调用5个方法  
其中4个指定文件读取方式  
另1种方法用来中断文件读取

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>FileReader.readAsBinaryString</td> 
   <td>文件读取为二进制字符串，每字节包含一个0到255之间的整数</td> 
  </tr> 
  <tr> 
   <td>FileReader.readAsText</td> 
   <td>文件读取为文本字符串。默认文本编码格式是’UTF-8’，可通过可选参数指定为其他编码格式</td> 
  </tr> 
  <tr> 
   <td>FileReader.readAsDataURL</td> 
   <td>文件读取为一个基于Base64编码的Data-URI对象</td> 
  </tr> 
  <tr> 
   <td>FileReader.readAsArrayBuffer</td> 
   <td>文件读取为一个ArrayBuffer对象</td> 
  </tr> 
  <tr> 
   <td>abort()</td> 
   <td>终止文件读取</td> 
  </tr> 
 </tbody> 
</table>

注：Blob（Binary Large Object）是二进制对象  
无论文件读取成功与否  
这些函数不会有任何返回值  
读取的文件结果存储于实例化的FileReader对象的result属性中

## 事件 ##

文件读取对象中除了上面的方法之外  
还包含一套完整的事件模型  
用于捕获在文件读取的各个状态  
**onloadstart** : 开始读取  
**onprogress** : 正在读取  
**onload** : 读取成功  
**onerror** : 读取错误  
**onabort** : 读取中断  
**onloadend** : 读取完成（无论成败）

## 使用 ##

现在我们使用这个Filereader来读取一个本地图像  
html如下  
简单创建了一个文件读取按钮input  
和一个用来显示所读取图片的img标签

![在这里插入图片描述][20190903094433405.png]  
js脚本如下

![在这里插入图片描述][20190903094457496.png]  
获取节点后  
为input标签绑定change事件  
这样当每次选择文件后，就会调用showImg函数进行读取

或者如果想要读取文字  
就是用readAsText

![在这里插入图片描述][20190903094603760.png]

## 文件读取模块 ##

为了更好的处理文件读取  
我们需要封装一个文件读取模块(这块还不是很懂，先放在这里吧~)

//events事件回调对象包含success,load,progress
    var FileLoader = function (file, events) {
        this.reader = new FileReader();
        this.file = file;
        this.loaded = 0;
        this.total = file.size;
        this.step = 1024 * 1024;//每次读取1M
        this.events = events || {};
        this.bindEvent();
        this.readBlob(0);//读取第一块
    }
    FileLoader.prototype = {
        bindEvent: function (events) {
            var _this = this,
                reader = this.reader;
            reader.onload = function (e) {
                _this.onLoad();
            };
            reader.onprogress = function (e) {
                _this.onProgress(e.loaded);
            };
            // start、abort、error回调暂无
        },
        onProgress: function (loaded) {
            var percent,
                handler = this.events.progress;
            this.loaded += loaded;
            percent = (this.loaded / this.total) * 100;
            handler && handler(percent);
        },
        // 读取结束（每一次执行read结后调用）
        onLoad: function () {
            var handler = this.events.load;
            // 在此发送读取的数据
            handler && handler(this.reader.result);
            // 如果未读取完毕继续读取
            if (this.loaded < this.total) {
                this.readBlob(this.loaded);
            } else {
                // 读取完毕
                this.loaded = this.total;
                // 如果有success回调则执行
                this.events.success && this.events.success();
            }
        },
        // 读取文件内容
        readBlob: function (start) {
            var blob,
                file = this.file;
            // 若支持slice方法，则分步读取，不支持就一次性读取
            if (file.slice) {
                blob = file.slice(start, start + this.step + 1);
            } else {
                blob = file;
            }
            this.reader.readAsText(blob);
        },
        // 中止读取
        abort: function () {
            var reader = this.reader;
            if(reader) {
                reader.abort();
            }
        }
    }

[20190903094433405.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9f3d06b90579492e8b09adf0b752d33f.png
[20190903094457496.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/2a1defabc7ba41e4988acca770e6227c.png
[20190903094603760.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d8dd63e60c984c4682fcfa90af12b4d2.png