|
JS读取文件 FileReaderFileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
文档FileReader
事件和方法事件处理 | FileReader.onabort | 处理abort事件。该事件在读取操作被中断时触发。 | | FileReader.onerror | 处理error事件。该事件在读取操作发生错误时触发。 | | FileReader.onload | 处理load事件。该事件在读取操作完成时触发。 | | FileReader.onloadstart | 处理loadstart事件。该事件在读取操作开始时触发。 | | FileReader.onloadend | 处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。 | | FileReader.onprogress | 处理error事件。该事件在读取操作发生错误时触发。 | 标准方法 中止读取操作。在返回时，readyState属性为DONE。 FileReader.readAsArrayBuffer() 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象. FileReader.readAsDataURL() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
基本使用文件的准备read.txt（随便读取电脑的文件都可以） 
HTML结构 <input type="file" multiple> JS调用 <script> window.onload = function(){ var inpFile = document.querySelector('input[type=file]') inpFile.addEventListener('change', function(){ var reader = new FileReader() // 发送异步请求 // 0.使用readAsText方法（读取结果普通文本） reader.readAsText(this.files[0]) // 读取成功的结果：已经成功读取文件（计算机上的文件read.txt） reader.onload = function(){ //读取完成后，数据保存在对象的result属性中 console.log(this.result)//打印：已经成功读取文件 } }) }</script>JS调用使用其它方法（其它方法也是一样使用） readAsDataURL window.onload = function(){ var inpFile = document.querySelector('input[type=file]') inpFile.addEventListener('change', function(){ var reader = new FileReader() // 使用readAsDataURL（获取base64编码） reader.readAsDataURL(this.files[0]) reader.onload = function(){ console.log(this.result) //data:text/plain;base64,5bey57uP5oiQ5Yqf6K+75Y+W5paH5Lu2 } }) }
事件处理JS调用（还是使用上面的html和文件
下载地址:
JS如何通过FileReader获取.txt文件内容
js利用FileReader读取本地文件或者blob方式 |
