img显示文件对象

首先这个图片文件对象从哪里来？

1 通过input 标签

<input type="flile" multiple id="filelist">
var files = document.getElementById("fb").files; // js 获取文件对象

2.通过 drag 和drop

dragbox.addEventListener("drop", drop, false);
function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    var dt = e.dataTransfer;
    var files = dt.files; //文件对象
    handFiles(files);
}

3.通过xmlHttpRequest请求

function init() {
    //$ajax("/ashx/handle.ashx", "post", "", function (data) { alert(data); });
    $ajax("/static/0101-01.png", "get", "", function (data) { alert(data); });
}

function $ajax(url,method,data,callback) {
    xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
    xhr.open(method, url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
    xhr.responseType = "blob";//接收的数据类型
    xhr.onload = reqListener; //请求完成
    xhr.send(data); //开始上传，发送form数据
}
function reqListener() {
    console.log(this.response);
    var blob = this.response;//文件对象
    
}

好了，文件对象取到了，那么该如何显示在html中呢

1.使用 FileReader

    var dragbox = document.querySelector("#dragbox");
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /^image//;
        if (!imageType.test(file.type)) {
            continue;
        }
        var img = document.createElement("img");
        img.classList.add("obj");
        img.file = file;
        dragbox.appendChild(img);

        var reader = new FileReader();
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result;
            }
        })(img);
        reader.readAsDataURL(file);
    }

2 使用window.URL.createObjectURL();

    var blob = files[0];
    var body = document.querySelector("body");
    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(blob);
    img.onload = function (e) {
        window.URL.revokeObjectURL(img.src);
    };

这两种都能将图片文件在html 中显示出来，但img标签的src 属性值却是不一样的，FileReader 中src属性值是一长串base64位编码；window.URL.createObjectURL()的src属性值为：blob:http://localhost:24706/dfe67478-661f-4e9e-91d3-d75d668f9f57 。 以blob开头的地址。以window.URL.createObjectURL()这种方式每次 需要使用revokeObjectURL释放URL对象。