用window.URL全局对象

1、 URL.createObjectURL() 静态方法会创建一个 DOMString,它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的 document 绑定。
2、在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片预览</title>
</head>
<body>
    <input type="file" id="file" multiple>
    <div id="preview">图片预览</div>
    <script>
        var preview = document.querySelector('#preview');
        var oFile = document.querySelector('#file');
        oFile.onchange = function(){
            var url = window.URL.createObjectURL(oFile.files[0]);
            // 创建预览图片
            var img = new Image();
            img.src = url;
            img.style.width = "80px";
            img.style.height = "80px";
            // 插入预览图片
            preview.appendChild(img);
          }
    </script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/ntword/p/11102234.html