利用javascript预览本地上传图片

<html>
<head>
<title>图片上传预览</title>
<script> 
	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) {//IE 
				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 {//FF 
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("imgPreview").innerHTML = "<img src='"+path+"'/>";
			}
		}
	}
</script>
</head>
<body>
	<div>
		<input type="file" onchange='PreviewImage(this)' />
		<div id="imgPreview" style='width: 500px; height: 400px;'>
			<img src="" />
		</div>
	</div>
</body>
</html>

posted @ 2016-11-04 13:51  Bug开发攻城狮  阅读(103)  评论(0编辑  收藏  举报