实现图片本地预览

最新推荐文章于 2022-10-25 13:32:33 发布

accphc

最新推荐文章于 2022-10-25 13:32:33 发布

阅读量104

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/accphc/article/details/84527402

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
<head>
	<title>图片本地预览</title>
	
	<script type='text/javascript'>
	
	
	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>

accphc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现图片本地预览

&lt;html&gt;&lt;head&gt; &lt;title&gt;图片本地预览&lt;/title&gt; &lt;script type='text/javascript'&gt; function change() { var pic = document.getElementById("preview"); var f...
复制链接

扫一扫