js 读取 input[type=file] 内容，直接显示文本 | 图片

这里面就不用

jquery 了，全用原生方法

---

1. 开始之前，你需要知道的一些基础知识

当出现 <input type="file"> 时，该元素的 value 属性保存了用户指定的文件的名称，当外层有 form 表单包裹的时候，选中的文件会被添加到表单中一并上传至服务器。

通过点击 input[type=file] 来选取文件的时候，都会触发该 input 的 onchange 句柄，想要显示文件的内容，在该句柄添加方法即可

---

2. 显示选取的文本文件的内容

html

js

照上面的来，就会在 p 标签中显示出选择的文本文件的内容。

下面说说具体是怎么实现的：

1. onchange="handleFiles(this.files)

在 input 上添加这个的意思是，在用户选择文件的时候，调用 handleFiles() 方法，并把当前 input 上已选中的文件传给 handleFiles() 方法。

传递的 this.files 是 input 这个元素上已有的属性 files, 如下图（ input 元素的所有属性部分截图），这个files 是个 FileList 对象，里面包含已选的文件数组，所以取的时候需要用索引。

因为我们这里只有一个文件，所以这个文件就是 files[0]，这样，我们就取到了这个文件。接下来就是读取并显示这个文件。

2. 用 FileReader 读取文件的内容

关于

FileReader 的详细属性和方法，看这里，特别好的一个网站，所有 js 特性都很详细

我们已经取到文件 files[0]，读取这个文件的内容，需要用到 FileReader 这个对象，其方法和属性可以查看本文最下文。

读取文本文件

let reader = new FileReader();    // 新建 FileReader 对象        reader.onload = function(){        // 当 FileReader 读取文件时候，读取的结果会放在 FileReader.result 属性中      document.getElementById('text').innerHTML = this.result;    };    reader.readAsText(file);    // 设置以什么方式读取文件，这里以文本方式

读取图片并显示

let fileReader = new FileReader();fileReader.onload = () => {    document.getElementById('preview').src = fileReader.result;    // 其它跟上面是一样的，这里只需要指定 img 的 src 到 FileReader.result 就好了};fileReader.readAsDataURL(file);// readAsDataURL 读取出的是图片的 base64 格式的数据，这种数据可以直接赋值到 img 的 src 上

像这样

---

---

---

参阅 ：FileReader 属性和方法

属性

FileReader.error 只读

一个DOMException，表示在读取文件时发生的错误 。

FileReader.readyState 只读

表示FileReader状态的数字。取值如下：

常量名	值	描述
EMPTY	0	还没有加载任何数据.
LOADING	1	数据正在被加载.
DONE	2	已完成全部的读取请求.

FileReader.result 只读

文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

事件处理

FileReader.onabort

处理abort事件。该事件在读取操作被中断时触发。

FileReader.onerror

处理error事件。该事件在读取操作发生错误时触发。

FileReader.onload

处理load事件。该事件在读取操作完成时触发。

FileReader.onloadstart

处理loadstart事件。该事件在读取操作开始时触发。

FileReader.onloadend

处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。

FileReader.onprogress

处理progress事件。该事件在读取Blob时触发。因为 FileReader 继承自EventTarget，所以所有这些事件也可以通过addEventListener方法使用。

---

方法

FileReader.abort()

中止读取操作。在返回时，readyState属性为DONE。

FileReader.readAsArrayBuffer()

开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.

FileReader.readAsBinaryString()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

FileReader.readAsDataURL()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

FileReader.readAsText()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。