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

一、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);

三、实例:预览选择的图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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>
</head>
<body>
    <input type="file" multiple onchange="showSelectedImages(this.files)" id="uploadInput">
    <div id="fileList"></div>
</body>
</html>