Html5的FileReader知识点_4.在filereader对象中,读取成功时触发的事件为-CSDN博客

本文链接：https://blog.csdn.net/weixin_46398352/article/details/128202138

FileReader知识点专题：

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的 FileList对象，也可以是来自拖放操作生成的 DataTransfer 对象，还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。

FileReader 接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result 属性中。

1.readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8。

2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储。

3.readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。

获取数据时，FileReader还提供一个完整的事件模型，用来捕获读取文件时的状态。

onabort:读取文件中断片时触发

onerror:读取错误时触发

onload:文件读取成功完成时触发

onloadend:读取完成时触发，无论成功还是失败

onloadstart:开始读取时触发

onprogress:读取文件过程中持续触发

实例：

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="content-type" content="text/JavaScript;charset=utf-8" />
   </head>
   <body>
       <input type="file" id="files" name="file" />读取文件:
       <span class="readButton">
           <button>显示</button>
       </span>
       <img src="" id="img" alt="" srcset="">
       <script>
           function readBlob() {

               var files = document.getElementById('files').files;
               if (!files.length) {
                   alert('Please select a file!');
                   return;
               }

               var file = files[0];
               var start = 0;
               var stop = file.size - 1;

               var reader = new FileReader();
               reader.readAsDataURL(file)

               // var blob = file.slice(start, stop + 1);
               // alert(blob);
               // console.log(blob)
               // reader.readAsText(blob,"utf-8");

               reader.onloadend = function(evt) {
                   if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                       var content = evt.target.result;
                       // alert(content);
                       //console.log(content)
                       var img = document.getElementById('img')
                       img.src = content
                   }
               };

}

           document.querySelector('.readButton').addEventListener('click', function(evt) {
               if (evt.target.tagName.toLowerCase() == 'button') {
                   readBlob();
               }
           }, false);
       </script>

</body>
</html>