XMLHttpRequest异步获取文件流

在写公司项目的时候，碰见了一个问题，

在编辑页面的时候需要获取到之前上传的文件，以缩略图的形式展现出来。

首先我想到了ajax异步传输，

但是解析异常，

查询之后才发现ajax技术并不能解析二进制流，

dataType：

•"xml": 返回 XML 文档，可用 jQuery 处理。
•"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
•"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
•"json": 返回 JSON 数据 。
•"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
•"text": 返回纯文本字符串

后面网上查询才发现原生的XMLHttpRequest在2.0版本的时候支持了二进制流的接收

所以使用了XMLHttpRequest

//ajax获取二进制数据流
                    var url = 'tpss/download?filename=' + ftpFilename + '&fileNameNew=' + arr[0];
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', url, true);
                    xhr.responseType = "blob";
                    xhr.filename=arr[0];
                    //xhr.setRequestHeader("client_type", "DESKTOP_WEB");
                    //   xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key);
                    xhr.onload = function () {
                        if (this.status == 200) {
                            //接受二进制文件流
                            var blob = this.response;
                            //封装成对应的文件对象
                            blob.name = this.filename;
                            that.files.push(blob);
                            var node = $('
');
                            node.append(that.closeButton.clone(true));
                            //将二进制数据流转换成一个url
                            node.prepend($("").attr("src", window.URL.createObjectURL(blob)))
                                .on("click", function (e) {
                                    window.open($(e.target).attr('src'));
                                });
                            node.append('
' + this.filename + '
');
                            node.prependTo(that.fileList);
                        }
                    }
                    xhr.send();

通过XMLHttpRequest异步获取到后台的文件，并通过

window.URL.createObjectURL

创建一个链接，这样就可以实现文件缩略图的功能

！！！同步加载为

xhr.open('GET', url, false);

同步无法指定获取二进制流封装的类型，是真二进制流。异步可以设置获取的二进制流封装类型

xhr.responseType = "blob";

如上所示。