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>