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() 的数据格式,(数据中的 \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中判断对象类型的几种方法
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
- js中的对象类型的基本操作
示例 /** * 对象属于一种复合数据类型,在对象中可以保存多个不同数据类型的属性 * 对象的分类: * 1.内建对象 * - 由ES标准定义的对象,在任何ES的实现中都可以使用,比如:Math, * ...
- js对已经对象类型进行类型辨别
typeof() Object.prototype.toString.call(data)
- js 判断l对象类型
var obj = {}; obj.isObject = function (obj) { return Object.prototype.toString.call(obj) == '[object ...
- js中判断对象具体类型
大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...
- JS判断对象类型
对于确定JS内置对象类型,JS提供了typeof运算符,该运算符得到的结果为以下6种:number,boolean,string,function,object,undefined.不过对绝大多数对象 ...
- js中推断对象详细类型
大家可能知道js中推断对象类型能够用typeof来推断. 看以下的情况 <script> alert(typeof 1);//number alert(typeof "2&quo ...
- html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
- js中关于Blob对象的介绍与使用
js中关于Blob对象的介绍与使用 blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是 ...
随机推荐
- c# 反射类字段
//在wpf中动态绘制Grid布局控件中值 需要来动态获取类中的字段数来自动生成Grid列数或者行数, public class models { public Label name { get; s ...
- U盘启动盘的制作--用U盘硬装Windows系统、或是重装Windows系统
借助IT天空的优启通U盘启动盘的制作--用U盘装Windows系统.或是重装Windows系统之U盘启动盘的制作 1.==================================== 2.== ...
- JAVA教师:给JAVA初学者的忠告
我带过不少JAVA,C++班的课,来学习的同学很多都是初学者,一部分是急着找工作的,一部分是很感兴趣的.他们都想在短短一两个星期内掌握Java,这是不切实际的.而且这样做很容易让自己心浮气燥,难以静下 ...
- Google Maps API V3 之 路线服务
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- 20145204&20145212信息安全系统实验一报告
信息安全系统实验报告 实验一 步骤 1.连接 arm 开发板 将 arm 开发板的电源线接好,使得开发板开关处于闭合状态.再分别将串口线.并口线和网线与 pc 机连接好. 2.建立超级终端 运行 wi ...
- Go - 变量初始化 及 注意事项
Go变量 初始化 对 复合类型(数组.切片.字典.结构体)变量的初始化是,有一些语法限制: 1.初始化表达式必须包含类型标签: 2.左花括号必须在类型尾部,不能另起一行: 3.多个成员初始值以逗号分隔 ...
- Linux/CentOS优化配置 汇总
[强烈要求做的]CentOS启用sudo,禁用root远程登录 Linux命令行修改IP.网关.DNS.主机名 的方法 Linux开机直接进入“命令行”模式 更改CentOS 6.x yum源为国内1 ...
- JDK source 之 LinkedHashMap原理浅谈
注:本文参考JDK1.7.0_45源码. LinkedHashMap是基于HashMap实现的数据结构,与HashMap主要的不同为每个Entry是使用双向链表实现的,并且提供了根据访问顺序进行排序的 ...
- iOS开发——UI进阶篇(十九)UISearchBar控件简介
最近用到搜索功能.总结一下 搜索,无疑可以使用UISearchBar控件! 那就先了解一下UISearchBar控件吧! UISearchBar控件就是要为你完成搜索功能的一个专用控件.它集成了很多你 ...
- oracle查询某一个字段的数量总和
select count(*) from (select count(*) from 表名称 group by 多种数据量 ) 表名; 举个栗子: 比如说我有一个数据类型的字段, 里面有很多种的数据类 ...