译注:原文是《JavaScript高级程序设计》的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考。原文链接:这里


到目前为止,这个系列的帖子集中在和这些文件交互——用户指定的文件和通过File对象访问的文件。File对象实际上是Blob的一个特殊版本,表示一块块的二进制数据。Blob对象继承了File对象的size和type属性。

在大部分情况下,Blobs和Files可以用在同一个地方。例如,你可以使用一个FileReader从一个Blob中读取数据,并且你可以在一个Blob中使用URL.createObjectURL()方法来创建一个对象URL。

slice

使用Blobs的一件有趣的事情是可以基于另外一个Blob的小部分来创建一个新的Blob。由于每个Blob代表的是数据的内存地址,而不是数据本身,所以你可以快速创建一个指向其他Blob子部分数据的Blob对象。这可以通过使用slice()方法来做到。

你可能对类似slice()的方法比较熟悉,可以用来处理字符串和数组,还有Blob。这个方法接收3个参数:起始字节的下标,结束字节的下标,还有一个可选且适用于Blob的MIME类型。如果MIME类型没有指定,新的Blob跟原始的BLob对象有相同的MIME类型。

浏览器对slice()的支持还不是很普遍,只有Firefox通过mozSlice()和webkitSlice()来支持它(其他浏览器现在都不支持)。这里有一个例子:

1
2
3
4
5
6
7
8
9
10
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!");
  }
}

比如,你可以使用这个函数将一个大文件拆分成一块块然后进行上传。每一个新产生的Blob都和原始的文件互不相干,即使每个blob的数据有重叠的部分。网络相册的工程师们使用blob分割来读取照片的可交换图片文件信息,这些照片是正在上传[1]的而不是已经上传到了服务器。当文件被选择的时候,上传文件和从照片中读取可交换图片文件信息,这2个动作在网络相册上传页面是同时开始的。这就允许在文件上传的时候,可以同时预览已经上传的部分数据的图像。

创建Blobs的老方法

ile对象在浏览器中开始出现后不久,开发人员意识到Blob对象是如此强大,以致想不通过用户交互就可以直接创建它们。毕竟,任何数据都可以放在Blob里面,而不一定要绑定一个文件。浏览器可以快速的创建BlobBuilder,这个对象类型的唯一目的就是将数据封装在一个Blob对象里面。这是一个非标准类型并且已经在Firefox(像MozBlobBuilder),IE10(像MSBlobBuilder)和Chrome(像WebKitBlobBuilder)中实现。

BlobBuilder通过创建一个实例,然后调用append()方法紧跟一个字符串、ArrayBuffer或者Blob来工作。一旦这些数据都被添加之后,你可以调用getBlob()并传递一个可选的MIME类型参数来使用Blob。这有个例子:

1
2
3
var builder = new BlobBuilder();
builder.append("Hello world!");
var blob = builder.getBlob("text/plain");

为数据的任意片段创建URLs的能力是非常强大的,允许你在浏览器中动态的创建链接到文件的对象。例如,你可以使用一个Blob来创建一个web worker,而不需要为web worker指定文件。这项技术写在Web Workers[2]的基础里:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Prefixed in Webkit, Chrome 12, and FF6: window.WebKitBlobBuilder, window.MozBlobBuilder
var bb = new BlobBuilder();
bb.append("onmessage = function(e) {
  postMessage('msg from worker');
}");
// Obtain a blob URL reference to our worker 'file'.
// Note: window.webkitURL.createObjectURL() in Chrome 10+.
var blobURL = window.URL.createObjectURL(bb.getBlob());
var worker = new Worker(blobURL);
worker.onmessage = function(e) {
  // e.data == 'msg from worker'
};
worker.postMessage();
// Start the worker.

这段代码创建了一个简单的脚本,然后创建一个对象URL。将对象URL赋予一个web worker来代替一个脚本URL。

你可以任意次调用append()来创建Blob的内容。

创建Blobs的新方式

因为开发人员一直呼吁可以有一种方式来直接创建Blob对象,然后浏览器出现了BlobBuilder,它决定添加一个Blob构造器。这个构造器现在是规范的一部分,将是未来创建Blob对象的一种方式。

这个构造器接收2个参数。第一个参数是一个分配了Blob块的数组。数据的元素跟传入BlobBuilder的append()方法的值相同,可以是任意数量的字符串,Blobs和ArrayBuffers。第二个参数是一个包含了新创建的Blob属性的对象。当前有2个属性已经定义:类型——指定Blob的MIME类型;endings——值分别是“transparent”(默认值)和“native”。这里有个例子:

1
var blob = new Blob(["Hello world!"], { type: "text/plain" });

像你看到的一样,这比使用BlobBuilder更加简单。Chrome的nightly builds版本和未来的Firefox 13将支持Blob构造器。其他浏览器还没有宣布实现该构造器的计划,尽管如此,现在它是File API[3]标准的一部分,期望以后会被普遍支持。

总结

这是“在JavaScript中进行文件处理”这一系列的最后一部分。我希望你了解到,File API非常强大,在web应用中开辟了很多全新的方式来处理文件。当用户需要上传文件时你不再需要坚持使用文件上传框,现在你可以在客户端读取文件,为客户端操作开辟了多种可能性。你可以在上传文件之前重置图片的大小(使用FileReader和<canvas>);你可以单纯在浏览器里创建一个文本编辑器;你可以分隔大文件进行逐步上载。可能性不是无穷无尽的,但也很接近无穷尽了。

引用

  1. Parsing Exif client-side using JavaScript by Flickr Team
  2. The Basics of Web Workers by Eric Bidelman
  3. File API – Blob Constructor

在JavaScript中进行文件处理,第五部分:Blobs的更多相关文章

  1. Javascript中的反射机制(五)

    一: 什么是反射机制 反射机制指的是程序在运行时能够获取自身的信息.例如一个对象能够在运行时知道自己有哪些方法和属性. 二: 在JavaScript中利用for(…in…)语句实现反射 在JavaSc ...

  2. 在JavaScript中进行文件处理,第一部分:基础

    译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 很多年前,我在一次Goole面试被问到,如何在w ...

  3. 在JavaScript中进行文件处理,第二部分:文件读取

    译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 在我的前一篇blog中,我介绍了在JavaScr ...

  4. 在JavaScript中进行文件处理,第三部分:处理事件和错误

    译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 FileReader对象用来读取浏览器可以访问的 ...

  5. 在JavaScript中进行文件处理,第四部分:对象URLs

    译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 学习到这里,你已经了解在传统方式中如何使用文件, ...

  6. javaScript中利用ActiveXObject来创建FileSystemObject操作文件

    注:如果用javascript读本地文件,遇到安全问题. 需在浏览器中进行设置,如下:     工具—> Internet选项->安全->自定义级别->启用“没有标识为安全的A ...

  7. JavaScript中ActiveXObject操作本地文件夹

    在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实现文档处理, 和使用js编写ActiveX做一个简单介绍. <!DOCTYPE HTM ...

  8. JavaScript中使用ActiveXObject操作本地文件夹的方法

    转载地址    http://www.jb51.net/article/48538.htm 在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实 ...

  9. JavaScript中ActiveXObject对象

    JavaScript中ActiveXObject对象是启用并返回 Automation 对象的引用.使用方法: newObj = new ActiveXObject( servername.typen ...

随机推荐

  1. 12.GIT多人协作

    当你从远程仓库克隆时,实际上Git自动把本地的master分支和远程的master分支对应起来了,并且,远程仓库的默认名称是origin. 查看远程库的信息 $ git remote origin $ ...

  2. python装饰器的应用案例

    目录 一.过程编程 二.面向装饰器和函数的编程 三.二的加强版 一.过程编程 (一)需求:打印菱形 1.空格.*号组成的菱形 2.输入菱形上半部分的行数即可打印 3.支持循环输入 (二)代码 from ...

  3. LVM的一些问题汇总 tune2fs命令

    LVM的一些问题汇总  tune2fs命令 --http://www.aminglinux.com/bbs/forum.php?mod=viewthread&tid=7664&page ...

  4. KL与JS散度学习[转载]

    转自:https://www.jianshu.com/p/43318a3dc715?from=timeline&isappinstalled=0 https://blog.csdn.net/e ...

  5. Django进阶 (二)

    规范 确立规范的好处: 代码可读性高 方便代码的定位极其查找 为以后代码扩容带来便利 场景: 在多个APP的场景下,单个app的URL函数功能较多的时候,我们可以通过以下方法来解决. 把Views写成 ...

  6. eclipse-maven安装配置java-web-servlet

    eclipse-maven安装配置java-web-servlet 系统说明: win7 64位 一. Maven安装 环境 要求 看Maven下载说明也行 jdk7.0以上 安装配置Maven 下载 ...

  7. asp.net 获取mp3 播放时长

    1 Shell32 //添加引用:COM组件的Microsoft Shell Controls And Automation //然后引用 using Shell32; //如果出现“无法嵌入互操作类 ...

  8. 【转】微信jssdk录音功能开发记录

    转自:http://www.cnblogs.com/liujunyang/p/4962423.html#undefined 0.需求描述 在微信浏览器内打开的页面,制作一个按钮,用户按住按钮后开始录音 ...

  9. jQuery获取不到隐藏DIV的高度和宽度

    今天做公司订单系统的修改,有同事将订单维护的四个部分拆成了四个小的tab页,由于数据表格时动态加载,所以表格的高度是动态变化的,可不知怎么,先点哪个哪个的高度就正常,其他的都是最小值,这下蒙了,这个找 ...

  10. 2017-2018-1 JaWorld 团队作业--冲刺1

    2017-2018-1 JaWorld 团队作业--冲刺1(20162301) 一.小组分工: 由于小组成员在本周比较忙碌,所以考虑后本组的冲刺就按照每天加入不同的类来完成.我们根据类的难度大小来决定 ...