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 FileReade