js 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() 的数据格式,(数据中的 \n 如何被转换)可以取值为 "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标签)
浏览器支持
js blob的更多相关文章
- 文件导出也可以这么写【js+blob】
文件导出在软件开发中是个比较常用的功能,基本原理也很简单: 浏览器向后台发送一个Get请求 后台处理程序接收到请求后,经过处理,返回二进制文件流 浏览器接收到二进制文件流后提示下载文件 调用的js方法 ...
- zone.js - 暴力之美
在ng2的开发过程中,Angular团队为我们带来了一个新的库 – zone.js.zone.js的设计灵感来源于Dart语言,它描述JavaScript执行过程的上下文,可以在异步任务之间进行持久性 ...
- 【JS】heatmap.js v1.0 到 v2.0,详细总结一下:)
前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这 ...
- Tween.js的使用示例
可参考:http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html 官方文档:https://github.com/tweenjs ...
- tween.js
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween ...
- 转载 r.js打包经验
例子1 先是HTML页面 <!DOCTYPE html> <html> <head> <title>My App</tit ...
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
- box2d.js
https://github.com/kripken/box2d.js/ Demo: http://kripken.github.io/box2d.js/webgl_demo/box2d.html 演 ...
- Three.js基础探寻十——动画
本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...
随机推荐
- 使用strace+pstack利器分析程序性能
引言 有时我们需要对程序进行优化.减少程序响应时间.除了一段段地对代码进行时间复杂度分析,我们还有更便捷的方法吗? 若能直接找到影响程序运行时间的函数调用,再有针对地对相关函数进行代码分析和优化,那相 ...
- PAT (Advanced Level) 1008. Elevator (20)
简单模拟. 注意a[i]==a[i-1]的情况. #include<iostream> #include<cstring> #include<cmath> #inc ...
- 【BZOJ 1572】 1572: [Usaco2009 Open]工作安排Job(贪心+优先队列)
1572: [Usaco2009 Open]工作安排Job Description Farmer John 有太多的工作要做啊!!!!!!!!为了让农场高效运转,他必须靠他的工作赚钱,每项工作花一个单 ...
- FMDB 查询是否存在某个表,或某个数据
//监测数据库中我要需要的表是否已经存在 NSString *existsSql = [NSString stringWithFormat:@"select count(name) as c ...
- NGUI具有流光效果的UISprite
之前做过一个流光效果(http://www.cnblogs.com/jietian331/p/4748644.html). 现将其改进一下,与NGUI结合起来,提供一个具有流光效果的组件:UIWalk ...
- ARC下需要注意的内存管理
ARC下需要注意的内存管理 2016/04/03 · iOS开发 · 内存管理 分享到:1 原文出处: 一不(@luoyibu) 之前发了一篇关于图片加载优化的文章,还是引起很多人关注的,不过也 ...
- Ubuntu Server 14.04 & Apache2.4 虚拟主机、模块重写、隐藏入口文件配置
环境: Ubuntu Server 14.04 , Apache2.4 一.Apache2.4 虚拟主机配置 01. 新建一份配置文件 在apache2.4中,虚拟主机的目录是通过/etc/apach ...
- UIScroll和UIPickView
.h #import <UIKit/UIKit.h> #define WIDTH self.view.frame.size.width #define HEIGHT self.view.f ...
- 通过条件注释<!--[if IE]><!-->判断浏览器
有时我们会在网站头部看到: <!--[if IE 7]> <![endif]--> 或者 <!--[if lt IE 9]> <![endif]--> ...
- 用命令行使用soot反编译生成jimple
使用工具:soot-2.5.0.jar 注意:soot-2.5.0.jar必须使用Java1.7以及之前的版本,使用Java1.8会发生错误. 修改jdk的方法是在设置java_home的路径的时候, ...