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

属性：

FileReader.error 表示在读取文件时发生的错误
FileReader.readyState
FilerReader.result 读取到的结果

FileReader

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。

创建实例

var reader = new FileReader();

方法

方法定义	描述
abort():void	终止文件读取操作
readAsArrayBuffer(file):void	异步按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file):void	异步按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file):void	异步读取文件内容，结果用data:url的字符串形式表示
readAsText(file,encoding):void	异步按字符读取文件内容，结果用字符串形式表示

事件

事件名称	描述
onabort	当读取操作被中止时调用
onerror	当读取操作发生错误时调用
onload	当读取操作成功完成时调用
onloadend	当读取操作完成时调用,不管是成功还是失败
onloadstart	当读取操作将要开始之前调用
onprogress	在读取数据过程中周期性调用

下面开始实际例子

index.html如下

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FileReader</title>
</head>
<body>
  <input id="input" type="file">
</body>
</html>

demo.txt如下

this is a demo test
hello world

读取txt文件

<script>
  const input = document.querySelector('input[type=file]')

  input.addEventListener('change', ()=>{
    const reader = new FileReader()
    reader.readAsText(input.files[0],'utf8') // input.files[0]为第一个文件
    reader.onload = ()=>{
      document.body.innerHTML += reader.result  // reader.result为获取结果
    }
  }, false)
  </script>

读取图片文件

<script>
  const input = document.querySelector('input[type=file]')

  input.addEventListener('change', ()=>{
    console.log( input.files )
    const reader = new FileReader()
    reader.readAsDataURL(input.files[0]) // input.files[0]为第一个文件
    reader.onload = ()=>{
      const img = new Image()
      img.src = reader.result
      document.body.appendChild(img)  // reader.result为获取结果
    }
  }, false)
  </script>

二进制数据上传

HTML5体系的建立引入了一大堆新的东西，基于XHR2，我们可以直接上传或下载二进制内容，无需像以往一样通过form标签由后端拉取二进制内容。
简单整理下上传逻辑：
1、通过input[type="file"]标签获取本地文件File对象
2、通过FileReader的readAsArrayBuffer方法将File对象转换为ArrayBuffer
3、创建xhr对象，配置请求信息
4、通过xhr.sendAsBinary直接将文件的ArrayBuffer内容装填至post body后发送
代码实现如下：

var input  = document.getElementById("file");   // input file
input.onchange = function(){
    var file = this.files[0];
        if(!!file){
            var reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = function(){
                var binary = this.result;
                upload(binary);
        }
    }
}

//文件上传
function upload(binary){
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://xxxx/opload");
    xhr.overrideMimeType("application/octet-stream");
    //直接发送二进制数据
    if(xhr.sendAsBinary){
        xhr.sendAsBinary(binary);
    }else{
        xhr.send(binary);
    }
    
    // 监听变化
    xhr.onreadystatechange = function(e){
        if(xhr.readyState===4){
            if(xhr.status===200){
                // 响应成功       
            }
        }
    }
}

new FileReader()

一、调用FileReader对象的方法

方法名参数描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

二、处理事件
事件描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

三、前端图片数据加载显示

<progress id="Progress" value="0" max="100"></progress>
<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">

function showPreview(source) {
        var file = source.files[0];
        console.log(file);
        if(window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
//                console.log(this.result);
                document.getElementById("portrait").src = e.target.result;
            };
            //给FileReader对象一个读取完成的方法,使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里,img通过加载这个地址,完成图片的加载
            fr.readAsDataURL(file);
        }
        var total = source.files[0].size;
        fr.onprogress = function(ev) {
            // 简单测试了一下 大概12M左右的传输速度
            // 推荐测试的时候用一个视频
            console.log(ev.loaded / total);
            var loading = (ev.loaded / total)*100;
            document.getElementById("Progress").value = loading;
        }
    }
四、base64与后台交互前端代码

<input type="file" id="upload-file">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
    // 用户选择图片进行上传
    // 上传成功, 后台返回图片的URL
    // 显示在当前页面上
    document.getElementById("upload-file").addEventListener("change", function(){
        for (var i = 0; i < this.files.length; i++) {
            var file = this.files[i];
            var reader = new FileReader();
            reader.onload = function (ev) {
                console.log(ev);
                console.log(ev.target.result);
                var base64Str = ev.target.result.split(",")[1];
                //console.log(base64Str)
                $.ajax({
                    url: "reImg.php",
                    data: {
                        "base64file": base64Str
                    },
                    type: "post",
                    success: function (res) {
                        createImg(res);
                    }
                })
            }
            reader.readAsDataURL(file);
        }
    });

    function createImg(imgSrc){
        var theImg = document.createElement("img");
        theImg.src = imgSrc;
        document.body.appendChild(theImg);
        theImg.className = "imgC";
    }

盏茶作酒

发布了48 篇原创文章 · 获赞 12 · 访问量 5万+

私信关注

FileReader()读取文件