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

    什么是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标签)

    转: https://blog.csdn.net/oscar999/article/details/36373183

  • 相关阅读:
    INSPIRED启示录 读书笔记
    PHP反射类的理解(代码篇)
    PHP之实现双向链表(代码篇)
    单点登录 SSO 的实现原理 SESSION COOKIE Memcache
    Linux里如何查找文件内容
    PHP获取数组长度的方法 函数参数的比较
    爬虫经验总结
    认证 协议 JWT OAuth Session Cookie
    PHP统计所有字符在字符串中出现的次数
    Nginx 源码安装和调优
  • 原文地址:https://www.cnblogs.com/fps2tao/p/9267034.html
Copyright © 2011-2022 走看看