用 FileSystem API 实现文件下载器

提醒:本文最后更新于 3831 天前,文中所描述的信息可能已发生改变,请谨慎使用。

各种基于 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+ 测试通过。

downloader

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

--EOF--

提醒:本文最后更新于 3831 天前,文中所描述的信息可能已发生改变,请谨慎使用。

专题「JavaScript 漫谈」的其他文章 »

Comments