JavaScript 图片上传预览：File API、Object URL 与类型校验
· 阅读需 2 分钟
本篇文章讲解如何使用js实现图片预览功能
图片预览应在客户端读取用户主动选择的文件，并校验 MIME 类型、大小和数量。使用 URL.createObjectURL 后要在不再需要时调用 revokeObjectURL 释放资源。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片预览</title>
<script type="text/javascript">
//图片上传预览 IE是用了滤镜。
function previewImage(file) {
var div = document.getElementById('previmage');
var oldimg = div.firstChild;
var w = oldimg.style.width;
var h = oldimg.style.height;
// console.log(w + ',' + h);
if (file.files && file.files[0]) {
div.innerHTML = "";
var img = document.createElement("img");
img.style.width = w;
img.style.height = h;
div.appendChild(img);
img.src = window.URL.createObjectURL(file.files[0]);
} else //兼容IE
{
file.select();
file.blur();
var imgSrc = document.selection.createRange().text;
//必须设置初始大小
div.style.width = w;
div.style.height = h;
//图片异常的捕捉，防止用户修改后缀来伪造图片
div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
oldimg.style.display = "none";
document.selection.empty();
}
}
</script>
</head>
<body>
<p>By xxzkid</p>
<!-- 图片预览 -->
<div>
<input type="file" onchange="previewImage(this);" />
<div id="previmage"><img src="" style="width: 200px; height: 200px;" /></div>
</div>
<!-- PS：#previmage > img 的width and height 一定要写在标签上，用class 或者id 选择器写的样式，在js中无法获取 -->
</body>
</html>