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状态的数字。取值如下：常量名值描述EMPTY0还没有加载任何数据.LOADING1数据正在被加载.DONE2已完成全部的读取请求.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属性中将包含一个字符串以表示所读取的文件内容。