图片上传预览（URL.createObjectURL）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

知识预备：
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[]);
// 创建预览图片
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=;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>