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

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

这里面就不用 jquery 了，全用原生方法

---

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

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

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

---

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

html

<input type="file" id="file" onchange="handleFiles(this.files)"/>
<p id="text"></p>

js

<script>
function handleFiles(files)
{
  if(files.length){
    let file = files[0];
    let reader = new FileReader();
    reader.onload = function(){
      document.getElementById('text').innerHTML = this.result;
    };
    reader.readAsText(file);
   }
}
</script>

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

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

1. onchange="handleFiles(this.files)

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

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

由于咱们这里只有一个文件，因此这个文件就是 files[0]，这样，咱们就取到了这个文件。接下来就是读取并显示这个文件。

2. 用 FileReader 读取文件的内容

关于 FileReader 的详细属性和方法，看这里，特别好的一个网站，全部 js 特性都很详细
https://developer.mozilla.org...

咱们已经取到文件 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属性中将包含一个字符串以表示所读取的文件内容。