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状况的数字。取值以下：

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属性中将包括一个字符串以示意所读取的文件内容。