用 FileSystem API 实现文件下载器

文章目录

获取下载文件信息
在 FileSystem 创建文件
开始下载
解决跨域问题
Demo

❗ 本文最后更新于 4099 天前，文中所描述的信息可能已发生改变，请谨慎使用。

各种基于 HTML5 的文件上传已经被大家玩得烂熟，常见的文件夹上传、拖拽上传以及拷贝剪切板数据上传，都可以在各大网盘、WebIM 中见到。本文实现的纯 JavaScript 多区块并发下载器，要使用到 FileSystem 中相对不那么常见的 FileWriter。

本文涉及知识较多，我并不打算全部介绍它们。示例代码中使用了 when.js 这个异步框架，它的用法请看官方文档或我写的《异步编程：WHEN.JS 快速上手》；文中涉及到的 HTTP 知识可以参考 RFC2616，或者《HTTP 权威指南》；本文代码仅在 Chrome 29+ 测试过，FileSystem 的完整浏览器支持度请直接去 CanIUse 查；本文未涉及到的 FileSystem 其它知识，请参考 html5rocks 的这篇文章，不过需要注意的这篇文章完成时间很早，部分代码已失效（如文中的 BlobBuilder 已被废弃）；JavaScript 中的 Typed Array 也都可以在网上找到详细介绍。

再说一点，文中示例代码未做封装，也完全没有考虑异常流程。这是我写博客的一惯原则：示例代码只为了把事情讲明白，如果要在实际项目中使用，需要读者自己去思考并加工。

废话说完，正式开始今天的主题。。。

获取下载文件信息

我们的 HTTP 下载器目标是下载指定 URL 对应的文件。为了方便后面的处理，首先，我们要获取这个文件的基本信息。虽然实际应用中我们需要的信息往往会由服务端提供，但本文目标是「完全不借助服务端语言（如 PHP），只使用浏览器 JavaScript 将 Nginx 托管的文件下载到本地」，所以这里采用纯客户端方案。

我们关心的是文件大小（便于分配任务）和文件类型（保存时要用到）。这两个信息在 HTTP 响应头中都有，分别是 Content-Length 和 Content-Type，可以通过 XHR（XMLHttpRequest）拿到它们。XHR 的 readyState 有 0 - 4 几种状态，等于 2 的时候就可以拿到响应头了。

按照上面的分析，通过 XHR 给目标文件发送 GET 请求，并在 readyState 等于 2 时获取响应头信息，再 abort() 掉请求就可以了。但实际上，HTTP 协议规定了「HEAD」这种请求方法，更适合做这件事情。文档对 HEAD 是这样说明的：

HEAD 方法与 GET 方法的行为很类似，但服务器在响应中只返回首部，不会返回实体的主体部分。这就允许客户端在未获取实际资源的情况下，对资源的首部进行检查。服务器开发者必须确保返回的首部与 GET 请求所返回的首部完全相同。遵循 HTTP/1.1 规范，就必须实现 HEAD 方法。

少数服务器不支持 HEAD，本文直接忽略。现在开始编写我们的 URL 分析工具，代码如下：

function UriAnalyser(url) {
    var deferred = when.defer();
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', url, true);
    xhr.onreadystatechange = function() {
        if(2 == this.readyState) {
            var ret = {
                    mimeType : xhr.getResponseHeader('Content-Type'),
                    size : xhr.getResponseHeader('Content-Length') | 0
                };

            deferred.resolve(ret);
        }
    };
    xhr.send();
    return deferred.promise;
}

代码很简单，不用解释了。UriAnalyser 接收 URL 参数并返回 promise，在获取到相关信息后 resolve。试用下：

var url = 'http://dl.qgy18.com/file.zip';
when(UriAnalyser(url)).then(function(o){ console.log(o) });

> Object {mimeType: "application/zip", size: 7992987}

在 FileSystem 创建文件

接下来，我们要在浏览器的 FileSystem 中创建一个区域，用来保存即将下载到的文件。出于安全考虑，浏览器中的 FileSystem 运行在沙箱中。要使用它，首先需要请求权限：

window.requestFileSystem(type, size, successCallback, errorCallback);

type 是文件系统类型，有 window.TEMPORARY 和 window.PERSISTENT 两种常量，区别是：TEMPORARY 类型的数据随时可能会被浏览器删掉；PERSISTENT 数据不会被浏览器清理，但需要用户额外授权。size 是存储大小，以字节为单位。后两个参数分别是请求文件系统成功和失败对应的回调，successCallback 的第一个参数是对文件系统的引用，我们用 fs 表示，后面还会用到。

下面两个方法分别用来获取文件系统中的目录和文件（目标不存在则新建）：

fs.root.getDirectory(dirName, {create: true}, function(dirEntry) { ... }, errorCallback);
fs.root.getFile(filePath, {create: true}, function(fileEntry) { ... }, errorCallback};

现在，我们编写「根据指定的文件名，在文件系统中创建对应空白文件」的方法如下：

function CreateFile(name) {
    var deferred = when.defer();
    window.webkitRequestFileSystem(window.TEMPORARY, 10 * 1024 * 1024, function(fs) {
        var dir = (+ new Date).toString(36);
        fs.root.getDirectory(dir, {create: true}, function(dirEntry) {
            var file = dir + '/' + name;
            fs.root.getFile(file, {create: true}, function(fileEntry) {
                fileEntry.createWriter(function(fileWriter) {
                    var ret = {
                            fileEntry  : fileEntry,
                            fileWriter : fileWriter
                        };
                    deferred.resolve(ret);
                });
            });
        });
    });
    return deferred.promise;
};

这个 promise 会返回 fileEntry 和 fileWriter，后面会用到。试用下：

var file = 'a.js';
when(CreateFile(file)).then(function(o){ console.log(o) });

> Object {fileEntry: FileEntry, fileWriter: FileWriter}

开始下载

现在开始编写下载代码。要实现并发下载，首先要合理分配任务。HTTP 协议中规定可以使用请求头的 Range 字段指定请求资源的范围。例如服务端收到「Range : bytes=10-100」这样的请求头，只需要返回资源的 10-100 字节这部分就可以了，这样的响应状态码为 206。有些服务器不支持 Range，本文继续忽略。

现在，离最终目标越来越近了。我们只需要再实现支持指定 Range 的下载器和任务分配器就可以了。下载器比较简单，直接看代码：

function Downloader(url, mimeType, range) {
    var deferred = when.defer();
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (this.readyState == 4) {
            if (this.response != null) {
                var blob = new Blob(
                        [ new Uint8Array(this.response) ], 
                        { type: mimeType }
                    );
                var ret = {
                        size : this.response.byteLength | 0,
                        blob : blob
                    };
                deferred.resolve(ret);
            }
        }
    };
    xhr.setRequestHeader("Range", "bytes=" + range);  
    xhr.responseType = 'arraybuffer'; 
    xhr.send();
    return deferred.promise;
};

下载器继续使用 promise 实现，它会在获取到响应数据时 resolve，返回指定 Range 的数据和大小。这样，把所有下载器丢给 when.all()，就可以在所有任务完成后触发下一步操作，顺序还不会乱。

文件全部下载完后，通过 fileWriter.write 方法就可以写入前面获得的 fileEntry 了。需要注意的是，当前数据写完之后才能开始新的写入，否则会产生异常。是否写完可以通过 fileWriter.onwriteend 来获得。下载完一部分数据就写一部分当然也可以，原理是类似的。

我把下载器 XHR 的 responseType 设置为「arraybuffer」，是为了获取每个下载器得到的长度。把全部下载器得到的长度加起来，跟分析器得到的文件大小做对比，可以粗略地检查文件完整性。

任务分配和合并文件的代码不贴了，太占篇幅，请直接看最后 Demo 的源代码。

文件合并完成后，通过 fileEntry.toURL() 得到文件在 FileSystem 中地址，赋给 <a> 标签的 href，再 click() 下就可以自动下载到本地了。

解决跨域问题

浏览器对同一个域名的并发连接数有限制，为了更好的实现并发下载，最好使用不同的域名访问要下载的文件，这用域名泛解析很容易实现。但是这样又会导致 XHR 被同源策略所限制。

还好，我们有 CORS（Cross-Origin Resource Sharing），专门用来解决这个问题。在 Nginx 配置文件中加上这几行就可以了：

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
add_header Access-Control-Allow-Headers Range;
add_header Access-Control-Expose-Headers Content-Type,Content-Length;

重点看下后两行：Allow-Headers 用来设置允许 XHR 发送哪些请求头，必须加上前面提到的 Range；Expose-Headers 用来设置哪些响应头可以被 XHR 的 getResponseHeader 方法获得，必须加上分析器用到的 Content-Type 和 Content-Length。

Nginx 本身还有一个问题：对静态资源发起 OPTIONS 请求会得到「405 Not Allowed」，这个问题可以改成用 PHP 读取文件再输出来解决。但前面说过，本文讨论内容不依赖服务端语言。通过 Google 找到了一个方案，在 Nginx 配置中增加下面这一段就可以了：

location / {
    if ($request_method = OPTIONS ) {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        add_header Access-Control-Allow-Headers Range;
        add_header Access-Control-Expose-Headers Content-Type,Content-Length;
        return 200;
    }
}

Demo

猛击这里观看 Demo，仅在 Chrome 29+ 测试通过。

本文链接：https://imququ.com/post/a-downloader-with-filesystem-api.html，参与评论 »

--EOF--

发表于 2013-10-01 01:16:38，并被添加「FileSystem、HTML5」标签。查看本文 Markdown 版本 »

本站使用「署名 4.0 国际」创作共享协议，相关说明 »

JerryQu 的博客