上传图片并显示，支持 IE Firefox Chrome

最新推荐文章于 2018-10-10 16:30:40 发布

oO感悟人生Oo

最新推荐文章于 2018-10-10 16:30:40 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签：上传图片

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

上传文件，并显示。兼容主流浏览器

直接上代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script>
			function change() {
				var pic = document.getElementById("preview");
				var file = document.getElementById("f");
				var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();
				// gif在IE浏览器暂时无法显示
				if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
					alert("文件必须为图片！");
					return;
				}
				// IE浏览器
				if (document.all) {

					file.select();
					var reallocalpath = document.selection.createRange().text;
					var ie6 = /msie 6/i.test(navigator.userAgent);
					// IE6浏览器设置img的src为本地路径可以直接显示图片
					if (ie6)
						pic.src = reallocalpath;
					else {
						// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
						pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
						// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
						pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
					}
				} else {
					html5Reader(file);
				}
			}

			function html5Reader(file) {
				var file = file.files[0];
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					var pic = document.getElementById("preview");
					pic.src = this.result;
				}
			}
		</script>

	</head>

	<body>
		<form enctype="multipart/form-data" name="form1">
			上传文件：
			<input id="f" type="file" name="f" οnchange="change()" />

			预览：
			<img id="preview" alt="" name="pic" />
		</form>
	</body>
</html>

转自：http://www.markdream.com/technologies/programs/image-preview.shtml