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

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

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

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

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

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

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

html

js

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);

}

}

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

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

1. οnchange="handleFiles(this.files)

在 input 上添加这个的意思是，在用户选择文件的时候，调用 handleFiles() 方法，并