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

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

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>

<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]，这样，我们就取到了这个文件。接下来就是读取并显示这个文件。

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

vue 中的获取 files 的方式：

<input ref="input" type="file" id="uploader" @change="handleFiles">
 <label class="avatar-btn-add" for="uploader"></label>

直接从 event 中获取 input 元素， input 中含有文件已选择的文件 domInput.files （FileList 对象），再做你需要做的就可以了。

methods:{
        handleFiles(event){
            // 从 input 元素中获取 files: FileList
            let files = event.target.files
        }
    }

2. 用 `FileReader` 读取文件的内容

关于 FileReader 的详细属性和方法，看这里，特别好的一个网站，所有 js 特性都很详细
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

我们已经取到文件 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 上

像这样

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