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>
