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>