图片上传实时展示
原文：https://www.jianshu.com/p/e816f8d82909
最近在做文件上传的需求，用到了一些IPA，研究了一下，感觉还挺有用的，主要解决了：图片上传到服务器后就可以立即展示在前端的页面，而不需要等上传成功之后，再拿回传的URL去请求。因为图片小的话还好说，如果图片很大的话，那就要等很长时间了!
一、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);
三、实例：预览选择的图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>预览选择的图片</title> </head> <body> <input type="file" multiple onchange="showSelectedImages(this.files)" id="uploadInput"> <div id="fileList"></div> </body> <script> window.URL = window.URL || window.webkitURL; /** * 显示选择的文件预览 * @param {[type]} files 选择的文件 */ function showSelectedImages(files) { var fileList = document.getElementById('fileList'); var list = document.createElement("ul"); fileList.appendChild(list); for (var i = 0; i < files.length; i++) { if (isImageByType(files[i].type)) { var li = document.createElement("li"); list.appendChild(li); var img = document.createElement("img"); img.src = window.URL.createObjectURL(files[i]); img.width = 200; img.onload = function() { window.URL.revokeObjectURL(this.src); } li.appendChild(img); var info = document.createElement("span"); info.innerHTML = files[i].name + "，" + parseBytes(files[i].size); li.appendChild(info); } } } /** * 解析文件字节数 * @param {[type]} bytes 总字节数 * @param {[type]} decimal 小数点后位数 * @return {[type]} 解析后的文件大小 */ function parseBytes(bytes, decimal) { var fileSize = 0, units = ["KB", "MB", "GB", "TB"]; decimal = decimal || 3; for (var i = 0, size = bytes / 1024; size > 1; size /= 1024, i++) { fileSize = size.toFixed(decimal) + units[i]; } return fileSize; } /** * 判断文件是否是图片 * @param {[type]} fileType 文件 * @return {Boolean} */ function isImageByType(fileType) { return fileType.indexOf("image") < 0 ? false : true; } </script> </html>