码迷,mamicode.com
首页 > Web开发 > 详细

js blob

时间:2017-01-16 10:55:00      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:orm   base   方法   nbsp   iam   fst   ret   swa   htm   

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 。

 

[javascript] view plain copy
 
  1. <script>  
  2.   var builder = new BolbBuilder();  
  3.   builder.append("Hello World!");  
  4.   var blob = builder.getBlob("text/plain");  
  5. </script>  

 

 

2. 新方法创建Blob 对象

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

type -- MIME 的类型。

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

[javascript] view plain copy
 
 技术分享技术分享
  1. <script>  
  2.   var blob = new Blob(["Hello World!"],{type:"text/plain"});  
  3. </script>  

 

 

Blob的应用

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

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

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

 

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

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

 

[javascript] view plain copy
 
 技术分享技术分享
  1. function sliceBlob(blob, start, end, type) {  
  2.   type = type || blob.type;  
  3.   if (blob.mozSlice) {  
  4.       return blob.mozSlice(start, end, type);  
  5.   } else if (blob.webkitSlice) {  
  6.       return blob.webkitSlice(start, end type);  
  7.   } else {  
  8.       throw new Error("This doesn‘t work!");  
  9.   }  
  10. }  


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

 

具体可以参考:

 

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

 

 

 

浏览器支持

技术分享

js blob

标签:orm   base   方法   nbsp   iam   fst   ret   swa   htm   

原文地址:http://www.cnblogs.com/yelongsan/p/6288665.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!