file加载远程blob文件

file加载远程blob文件

file是前端的选择文件对象的控件，把文件以blob形式的数据载入body，如果我们需要加载服务器端的文件，或者不需要手工选择而是通过程序直接加载文件呢？

下面这段代码通过XMLHttpRequest对象，并且xhr.responseType 设置为”blob”的方法，可以实现：

window.URL = window.URL || window.webkitURL;
if (typeof history.pushState == "function") {
    var xhr = new XMLHttpRequest();    
    //这里可以是图片、音频、视频、文本文件等等前端可以选择的文件
    xhr.open("get", "/image/study/s/s256/mm1.jpg", true);
    xhr.responseType = "blob";
    xhr.onload = function() {
        if (this.status == 200) {
            var blob = this.response; //此对象等同于前端人工选择文件载入的内容
            //可以把对象赋给相应的页面控件
            var img = document.createElement("img");
            img.onload = function(e) {
              window.URL.revokeObjectURL(img.src); // 清除释放
            };
            img.src = window.URL.createObjectURL(blob);
            eleAppend.appendChild(img);    
        }
    }
    xhr.send();
} else {
    console.info("浏览器不支持~");
}