javascript之URL.createObjectURL和URL.revokeObjectURL 图片预览

[codeceo-net]

一、URL.createObjectURL
　　URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL。
　　这个URL的生命仅存在于它被创建的这个文档里，新的对象URL指向执行的File对象或者是Blob对象。

　　语法:
　　　　objectURL = window.URL.createObjectURL(blob || file);

　　File对象，就是一个文件，比如我用input type="file"标签来上传文件，那么里面的每个文件都是一个File对象。

　　Blob对象，就是二进制数据，比如通过new Blob()创建的对象就是Blob对象。
　　又比如，在XMLHttpRequest里，如果指定responseType为blob，那么得到的返回值也是一个blob对象。

二、URL.revokeObjectURL

　　每次调用createObjectURL时，即使你已经为同一个文件创建过一个URL，也会创建一个新的URL对象。
　　如果你不再需要这个对象，需要使用URL.revokeObjectURL()方法释放它。
　　虽然当页面被关闭，浏览器会自动释放它，但是为了最佳性能和内存使用，当确保不再用得到它时，就应该释放它。

　　语法:
　　　　window.URL.revokeObjectURL(objectURL);

三、实例：预览选择的图片
`

<title>预览选择的图片</title> <script> window.URL = window.URL || window.webkitURL; /** * 显示选择的文件预览 * @param {[type]} files 选择的文件 */ function showSelectedImages(files) { var fileList = document.getElementById('fileList'); var list = document.createElement("ul"); fileList.appendChild(list); for (var i = 0; i < files.length; i++) { if (isImageByType(files[i].type)) { var li = document.createElement("li"); list.appendChild(li);

            var img = document.createElement("img");
            img.src = window.URL.createObjectURL(files[i]);
            img.width = 200;
            img.onload = function() {
                window.URL.revokeObjectURL(this.src);
            }
            li.appendChild(img);
            var info = document.createElement("span");
            info.innerHTML = files[i].name + "，" + parseBytes(files[i].size);
            li.appendChild(info);
        }
    }
}
/**
 * 解析文件字节数
 * @param  {[type]} bytes   总字节数
 * @param  {[type]} decimal 小数点后位数
 * @return {[type]}         解析后的文件大小
 */
function parseBytes(bytes, decimal) {
    var fileSize = 0,
        units = ["KB", "MB", "GB", "TB"];
    decimal = decimal || 3;
    for (var i = 0, size = bytes / 1024; size > 1; size /= 1024, i++) {
        fileSize = size.toFixed(decimal) + units[i];
    }
    return fileSize;
}
/**
 * 判断文件是否是图片
 * @param  {[type]}  fileType 文件
 * @return {Boolean}
 */
function isImageByType(fileType) {
    return fileType.indexOf("image") < 0 ? false : true;
}

</script>

`