一、URL.createObjectURL
URL.createObjectURL()方法會根據傳入的參數創建一個指向該參數對象的URL。
這個URL的生命僅存在於它被創建的這個文檔里，新的對象URL指向執行的File對象或者是Blob對象。
語法:
objectURL = window.URL.createObjectURL(blob || file);
File對象，就是一個文件，比如我用input type="file"標簽來上傳文件，那么里面的每個文件都是一個File對象。
Blob對象，就是二進制數據，比如通過new Blob()創建的對象就是Blob對象。
又比如，在XMLHttpRequest里，如果指定responseType為blob，那么得到的返回值也是一個blob對象。
二、URL.revokeObjectURL
每次調用createObjectURL時，即使你已經為同一個文件創建過一個URL，也會創建一個新的URL對象。
如果你不再需要這個對象，需要使用URL.revokeObjectURL()方法釋放它。
雖然當頁面被關閉，瀏覽器會自動釋放它，但是為了最佳性能和內存使用，當確保不再用得到它時，就應該釋放它。
語法:
window.URL.revokeObjectURL(objectURL);
三、實例：預覽選擇的圖片
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>預覽選擇的圖片</title> 6 <script> 7 window.URL = window.URL || window.webkitURL; 8 /** 9 * 顯示選擇的文件預覽 10 * @param {[type]} files 選擇的文件 11 */ 12 function showSelectedImages(files) { 13 var fileList = document.getElementById('fileList'); 14 var list = document.createElement("ul"); 15 fileList.appendChild(list); 16 for (var i = 0; i < files.length; i++) { 17 if (isImageByType(files[i].type)) { 18 var li = document.createElement("li"); 19 list.appendChild(li); 20 21 var img = document.createElement("img"); 22 img.src = window.URL.createObjectURL(files[i]); 23 img.width = 200; 24 img.onload = function() { 25 window.URL.revokeObjectURL(this.src); 26 } 27 li.appendChild(img); 28 var info = document.createElement("span"); 29 info.innerHTML = files[i].name + "，" + parseBytes(files[i].size); 30 li.appendChild(info); 31 } 32 } 33 } 34 /** 35 * 解析文件字節數 36 * @param {[type]} bytes 總字節數 37 * @param {[type]} decimal 小數點后位數 38 * @return {[type]} 解析后的文件大小 39 */ 40 function parseBytes(bytes, decimal) { 41 var fileSize = 0, 42 units = ["KB", "MB", "GB", "TB"]; 43 decimal = decimal || 3; 44 for (var i = 0, size = bytes / 1024; size > 1; size /= 1024, i++) { 45 fileSize = size.toFixed(decimal) + units[i]; 46 } 47 return fileSize; 48 } 49 /** 50 * 判斷文件是否是圖片 51 * @param {[type]} fileType 文件 52 * @return {Boolean} 53 */ 54 function isImageByType(fileType) { 55 return fileType.indexOf("image") < 0 ? false : true; 56 } 57 </script> 58 </head> 59 <body> 60 <input type="file" multiple onchange="showSelectedImages(this.files)" id="uploadInput"> 61 <div id="fileList"></div> 62 </body> 63 </html>