[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进阶] JS 之Blob 对象类型相关推荐

【学习笔记】JS进阶语法一window对象
内容整理自<从0到1Javascript快速上手>下半部分-进阶语法篇示例:打开/关闭新窗口 <!DOCTYPE html> <html><head> ...
【学习笔记】JS进阶语法一document对象
内容整理自<从0到1Javascript快速上手>下半部分-进阶语法篇示例:write()方法和writeln()方法区别 <!DOCTYPE html> <html& ...
js Blob对象介绍
2019独角兽企业重金招聘Python工程师标准>>> 什么是Blob?Blob是一种JavaScript的对象类型.HTML5的文件操作对象,file对象就是Blob的一个分支或说 ...
js中关于Blob对象的介绍与使用
js中关于Blob对象的介绍与使用 blob对象介绍一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js ...
自学JavaScript第二天- JS 进阶: 对象函数
自学JavaScript第二天- JS 进阶: 对象函数对象进阶构造函数使用类类的继承静态方法函数进阶方法装饰器高阶函数 map / reduce filter sort ever ...
js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
js中的对象类型与具体的对象
js 基础学习地址:http://www.w3school.com.cn/ JS对象类型:本地对象.宿主对象(浏览器对象).内置对象本地对象:独立于宿主环境的ECMAScript实现提供的对象,简单 ...
js二进制流转Blob对象。Blob对象再转File对象
JavaScript 二进制转文件使用js将blob对象转file对象前端处理后端返回的二进制流文件 js中Blob对象一般用法 js中关于Blob对象的介绍与使用上传的文件对象完整代码实例 ...
JS进阶你真的掌握变量和类型了吗？
Table of Contents 简言导读一.JavaScript数据类型原始类型对象类型二.为什么区分原始类型和对象类型 2.1 不可变性栈内存: 2.2 引用类型堆内存: 2.3 ...

[JS进阶] JS 之Blob 对象类型

什么是Blob?