第四篇：前端读取文件 | FileReader 对象及其属性

这篇文章是这个分类下的第四篇随笔了，之前可能对文件上传还不是很清晰，写到这篇，也就明白套路了。

ps：这就是写博客的好处。

第一步：定义一个input标签type="file"

觉得 <input/> 样式难看又难改的，请看一下这个分类下的第三篇随笔。

<input type="file" onChange={(ev) => this.getFiles(ev.target.files)} />

<span id="textInner"></span>

第二步：定义一个 getFiles 的方法，读取上传的文件。

  getFiles = (files) => {
    const textInner = document.getElementById("textInner"); // 获取一个标签，把读取的内容插进去
    if (files.length) {
      var file = files[0];
      var reader = new FileReader(); // new一个FileReader实例
      console.log(reader, file)
      if (/text+/.test(file.type)) { // 判断文件类型，是不是text类型
        reader.onload = function () {
          textInner.innerText = this.result
        }
        reader.readAsText(file);
      } else if (/image+/.test(file.type)) { // 判断文件是不是imgage类型
        reader.onload = function () {
          textInner.innerHTML = '<img src="' + this.result + '"/>'
        }
        reader.readAsDataURL(file);
      }
    }
  }

到这里，读取文件就结束了，下面来了解一下 html5 的 FileReader 对象及其属性

FileReader接口的方法：

属性	参数	介绍
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本，其中第二个参数是文本的编码方式，默认值为 UTF-8
readAsDataURL	file	将文件读取为DataURL
abort	无	中断读取操作(无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中)

相关事件：

onabort                               中断
onerror                               出错
onloadstart                     　 开始
onprogress                         正在读取
onload                                成功读取
onloadend                          读取完成，无论成功失败

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果。

如果读取文件过大的话fileReader允许分段读取文件；

var blob_file;
if(file.webkitSlice) {  //chrome
        blob_file= file.webkitSlice(start, end + 1, 'text/plain;charset=UTF-8');
} else if(file.mozSlice) { //Firefox
        blob_file= file.mozSlice(start, end + 1, 'text/plain;charset=UTF-8');
}

顺便唠叨一下base64编码的优缺点：

优点：

　　1.减少了http请求。

　　2.没有跨域的问题。

　　3.直接放在路径里不需要清理缓存。

缺点：

　　1.IE6/7不支持(不过这个问题不大)；

　　2.base64本质上是将图片以二进制的字母展示，字符量过大无形中增加了css/html文件的大小；

---

申明：此文章只供本人学习用，不做任何商业目的，部分内容来自互联网。