圖片上傳預覽（URL.createObjectURL）

時間 2019-12-01

標籤圖片上傳預覽 url.createobjecturl url createobjecturl 欄目 HTTP/TCP 简体版

原文原文鏈接

知識預備：
一、 URL.createObjectURL() 靜態方法會建立一個 DOMString，它的 URL 表示參數中的對象。這個 URL 的生命週期和建立它的窗口中的 document 綁定。
二、在每次調用 createObjectURL() 方法時，都會建立一個新的 URL 對象，即便你已經用相同的對象做爲參數建立過。當再也不須要這些 URL 對象時，每一個對象必須經過調用 URL.revokeObjectURL() 方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，可是爲了得到最佳性能和內存使用情況，你應該在安全的時機主動釋放掉它們。

html

在線演示web

1、單張圖片預覽瀏覽器

<!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>

2、多張圖片預覽安全

<!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(){
            for(var i=0;i<oFile.files.length;i++){
                var url = window.URL.createObjectURL(oFile.files[i]);
                // 建立預覽圖片
                var img = new Image();
                img.src = url;
                img.style.width = "80px";
                img.style.height = "80px";
                // 插入預覽圖片
                preview.appendChild(img);                
            }
        }
    </script>
</body>
</html>