URL.createObjectURL和URL.revokeObjectURL
一、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>
