JS前端使用Blob和File读取文件的操作代码

时间:2022-11-05 zhq2005095 人气:0

历史上，JavaScript 无法处理二进制数据。如果一定要处理的话，只能使用 charCodeAt() 方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理。这两种方法不仅速度慢，而且容易出错。ECMAScript 5 引入了 Blob 对象，允许直接操作二进制数据。

Blob

对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的API，用来操作文件。

File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
FileList对象：File对象的网页表单接口；
FileReader对象：负责将二进制数据读入内存内容；
URL对象：用于对二进制数据生成URL Blob

Blob (Binary Large Object) 对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如 File 对象），都是建立在 Blob 对象基础上的，继承了它的属性和方法。

创建 Blob 类型的对象

生成 Blob 对象有两种方法：一种是使用 Blob 构造函数，另一种是对现有的 Blob 对象使用 slice 方法切出一部分。

1. new Blob()

Blob 构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，这个数组中的元素可以为 DOMString ，或者 ArrayBuffer ，第二个参数是数据的类型，这两个参数都不是必需的。

var domstring = '<div>Hello world</div>';
var blob1 = new Blob([domstring], {type: 'text/html'});
var buffer = new ArrayBuffer(8);
var blob2 = new Blob([buffer], {type: 'text/plain'});

2. blob.slice()

此方法返回一个新的 Blob 对象，包含了原 Blob 对象中指定范围内的数据

Blob.slice(start:number, end:number, contentType:string)。start：开始索引，默认为0；end：截取结束索引（不包括end）；contentType：新Blob的MIME类型，默认为空字符串

Blob 对象的属性

Blob.size: Blob 对象中所包含数据的大小（字节）。该属性为只读；
Blob.type: 一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。该属性为只读

Blob 应用实例

下面是一个使用XMLHttpRequest对象，将大文件分割上传的例子。

function upload(blobOrFile) {
  let xhr = new XMLHttpRequest();
  xhr.open('post', '/server', true);
  xhr.onload = function(e) {};
  xhr.send(blobOrFile);
}

document.querySelctor('input[type="file"]').addEventListener('change', function() {
  let blob = this.files[0];
  const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk size
  const SIZE = blob.size;
  let start = 0;
  let end = BYTES_PER_CHUNK;
  while(start < end) {
    upload(blob.slice(start, end));
    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);

File

File 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

File 对象可以用来获取某个文件的信息，还可以用来读取这个文件的内容。通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象，也可以是来自由拖放操作生成的 DataTransfer 对象。

用户在选择一个或者多个文件后，可以通过 File API访问这些File 对象，这些对象被包含在一个 FileList 对象中。所有 type 为 file 的 input 都有一个 files 属性，通过 Element.files 可以返回 FileList 对象。

<body>
    <input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*">
    <script>
        var fileInput = document.querySelector("#fileInput");
        fileInput.addEventListener("change", function (event) {
          // 文件列表对象
          var fileList = this.files;
          // 获取第一个文件
          var file = fileInput.files[0];
          // 文件名
          var filename = file.name;
          // 文件大小
          var filesize = file.size;
          //文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读
          var type = file.type; 
          // 文件的上次修改时间，格式为时间戳
          var lastModified = file.lastModified;
          // 文件的上次修改时间，格式为 Date 对象实例
          var lastModifiedDate = file.lastModifiedDate;
        }, false);

        console.log(fileList);
        // 上传了两个文件，FileList {0: File, 1: File, length: 2}
    </script>
</body>

File 对象的属性:

name：文件名，该属性只读。
size：文件大小，单位为字节，该属性只读。
type：文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读。
lastModified：文件的上次修改时间，格式为时间戳。
lastModifiedDate：文件的上次修改时间，格式为 Date 对象实例

File 对象的方法：

File 接口没有定义任何方法，但是它从 Blob 接口继承了以下方法：

Blob.slice([start[, end[, contentType]]])

返回一个新的 Blob 对象，它包含有源 Blob 对象中指定范围内的数据。

FileReader

我们知道 Blob 对象只是二进制数据的容器，本身并不能操作二进制，FileReader 对象就是专门操作二进制数据的，FileReader 主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

构造函数

var reader = new FileReader();

属性

FileReader.error：表示在读取文件时发生的错误；
FileReader.readyState：0-还没有加载任何数据, 1-数据正在被加载, 2-已完成全部的读取请求；
FileReader.result：文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

事件

FileReader.onabort：处理 abort 事件。该事件在读取操作被中断时触发；
FileReader.onerror：处理 error 事件。该事件在读取操作发生错误时触发；
FileReader.onload：处理 load 事件。该事件在读取操作完成时触发；
FileReader.onloadstart：处理 loadstart 事件。该事件在读取操作开始时触发；
FileReader.onloadend：处理 loadend 事件。该事件在读取操作结束时（要么成功，要么失败）触发；
FileReader.onprogress：处理 progress 事件。该事件在读取 Blob 时触发

方法

FileReader.abort()：中止读取操作。在返回时，readyState 属性为DONE；
FileReader.readAsArrayBuffer()：开始读取指定的 Blob 中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象；
FileReader.readAsBinaryString()：开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含所读取文件的原始二进制数据, 该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件；
FileReader.readAsDataURL()：开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容；
FileReader.readAsText()：开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个字符串以表示所读取的文件内容, 该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

实际应用

上传图片后直接进行预览，而不用先经过后台。

var input  = document.getElementById("file"); //input file
input.onchange = function(){
    var file = this.files[0];
    if(!!file){
        var reader = new FileReader();
        // 将图片转成DataURL格式
        reader.readAsDataURL(file);
        reader.onload = function(){
            //读取完毕后输出结果
           document.getElementById("file_img").src = reader.result //显示上传的图片
           console.log(reader.result);
        }
    }
}

URL

URL.createObjectURL(blob)

//blob参数是一个File对象或者Blob对象.
var objecturl =  window.URL.createObjectURL(blob);

上面的代码会对二进制数据生成一个 URL ，这个 URL 可以放置于任何通常可以放置 URL 的地方，比如 img 标签的 src 属性。需要注意的是，即使是同样的二进制数据，每调用一次 URL.createObjectURL 方法，就会得到一个不一样的 URL。

这个 URL 的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个 URL 就失效。（File 和 Blob 又何尝不是这样呢）除此之外，也可以手动调用 URL.revokeObjectURL 方法，使 URL 失效。

URL.revokeObjectURL(objectURL);

当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

实际应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="./lib/jquery.js"></script>
    <style type="text/css">
        #file{
            display: block;
            width: 400px;
            height: 300px;
            opacity:0;
            margin: -300px 0 0 0;            
        }
        #preview{
            display: block;
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img id="preview" src="" alt="点击上传图片"/>
    <input type="file" id="file" />
</body>
</html>
<script type="text/javascript">
  $('#file').on('change', function(){
    //获取文件列表对象
    var fileList = $('#file')[0].files;
    //创建文件流获取文件地址
    var src = window.URL.createObjectURL(fileList[0]); 　　　　
    //设置图片路径  
    $("#preview").attr("src", src);
    $("#preview").load(function() {
      window.URL.revokeObjectURL(src);
    });
　});
</script>

参考资料

Blob - Web API 接口参考 | MDN

Blob,FileReader全面解析

加载全部内容