<html>
<head>
<title>
图片上传预览
</title>
</head>
<body>
<div>
<input type="file" onchange='PreviewImage(this)' />
<div id="imgPreview" style='width: 500px; height: 400px;'>
<img src="" />
</div>
</div>
</body>
</html>
function PreviewImage(imgFile) {
var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
if (!pattern.test(imgFile.value)) {
alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片!");
imgFile.focus()
} else {
var path;
if (document.all) {
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML = "";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"
} else {
var fr = new FileReader();
path = URL.createObjectURL(imgFile.files[0]);
console.log(fr.readAsDataURL(path))
document.getElementById("imgPreview").innerHTML = "<img src='" + path + "'/>"
}
}
}