知識預備：
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>
二、多張圖片預覽
<!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>
三、瀏覽器支持
