zoukankan      html  css  js  c++  java
  • JS 之Blob 对象类型

    原文 http://blog.csdn.net/oscar999/article/details/36373183

    什么是Blob?

    Blob 是什么? 这里说的是一种Javascript的对象类型。

    oracle 中也有类似的栏位类型。

    [JS进阶] HTML5 之文件操作(file)

    这一篇中用到了File对象,而实际上 file 对象只是 blob 对象的一个更具体的版本,blob 存储着大量的二进制数据,并且 blob 的 size 和 type 属性,都会被 file 对象所继承。

    所以, 在大多数情况下,blob 对象和 file 对象可以用在同一个地方,例如,可以使用 FileReader 借口从 blob 读取数据,也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL 对象。

    如何创建Blob

    1. 使用旧方法创建 Blob 对象。

    旧的方法使用 BlobBuilder 来创建一个Blob 实例,并且使用一个 append() 方法,将字符串(或者 ArrayBuffer 或者 Blob,此处用 string 举例)插入,一旦数据插入成功,就可以使用 getBlob() 方法设置一个 mime 。

    <script>
        var builder = new BolbBuilder();
        builder.append("Hello World!");
        var blob = builder.getBlob("text/plain");
      </script>

    2. 新方法创建Blob 对象

    在新的方法中直接可以通过 Blob() 的构造函数来创建了。构造函数,接受两个参数,第一个为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。第二个参数,是一个包含了两个属性的对象,其两个属性分别是:

    type -- MIME 的类型。

    endings -- 决定 append() 的数据格式,(数据中的 如何被转换)可以取值为 "transparent" 或者 "native"(t* 的话不变,n* 的话按操作系统转换;t* 为默认) 。

    <script>
        var blob = new Blob(["Hello World!"],{type:"text/plain"});
      </script>

    Blob的应用

    1. 大文件分割 (slice() 方法)

    slice() 方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。如果 mime 类型,没有设置,那么新的 Blob 对象的 mime 类型和父级一样。

    当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的。

    不过目前浏览器实现此方法还没有统一,火狐使用的是 mozSlice() ,Chrome 使用的是 webkitSlice() ,其他浏览器则正常的方式 slice()

    可以写一个兼容各浏览器的方法:

    function sliceBlob(blob, start, end, type) {
        type = type || blob.type;
        if (blob.mozSlice) {
          return blob.mozSlice(start, end, type);
        } else if (blob.webkitSlice) {
          return blob.webkitSlice(start, end type);
        } else {
          throw new Error("This doesn't work!");
        }
      }

    2.  在Chrome 中指定下载的文件名;

    具体可以参考:

    Web 端 js 导出csv文件(使用a标签)

  • 相关阅读:
    移动端布局方案汇总&&原理解析
    Javascript运行机制
    git 使用
    async await详解
    vue使用axios调用豆瓣API跨域问题
    hash和history的区别
    http状态码
    XSS 和 CSRF简述及预防措施
    【pytorch】pytorch基础学习
    [源码解读] ResNet源码解读(pytorch)
  • 原文地址:https://www.cnblogs.com/sugar-tomato/p/4883529.html
Copyright © 2011-2022 走看看