图片预览兼容ie6-11，chrome,firefox,opera

最新推荐文章于 2021-06-05 02:27:09 发布

原创最新推荐文章于 2021-06-05 02:27:09 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一款用于网页的图片预览插件，该插件解决了代码中存在的小bug，并支持多种图片格式预览，包括jpg、gif、jpeg和png等。通过使用FileReader API和其他兼容方法，实现了不同浏览器下的图片实时预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件版，解决一下代码的小bug，附加demo.<a target=_blank href="http://download.youkuaiyun.com/detail/u014453536/9643098">点击打开链接</a>

function editUpfile(obj) {
			var photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
		    if(!(photoExt=='.jpg'||photoExt=='.jpeg'||photoExt=='.png'||photoExt=='.gif')){
		        $.fn.showAlert({
					msg : "请上传后缀名为jpg,.gif,.jpeg,.png的照片!"
				});
		        return ;
		    }
			var imgdom= document.createElement("img");
			$(obj).parents('.pic-con').children("img").remove();
			$(obj).parents('.pic-con').append(imgdom);
			$(imgdom).css("src","");
			$(imgdom).css("width","100%");
			$(imgdom).css("height","100%");
	        if(window.FileReader){//chrome,firefox7+,opera,IE10+
	           oFReader = new FileReader();
	           oFReader.readAsDataURL(obj.files[0]);
	           oFReader.onload = function (oFREvent) {
	        	   imgdom.src = oFREvent.target.result;
	           };        
	        }
	        else if (document.all) {//IE8-
	        	obj.select();
	        	//obj.blur();//若当前页面没在iframe,不存在跨域
	        	window.top.document.body.focus();//若当前页面嵌在iframe中
	            var reallocalpath = document.selection.createRange().text;//IE下获取实际的本地文件路径
	            if (window.ie6) imgdom.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
	            else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现，IE10浏览器不支持滤镜，需要用FileReader来实现，所以注意判断FileReader先
	            	imgdom.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
	            	imgdom.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//设置img的src为base64编码的透明图片，要不会显示红xx
	            }
	        }
	        else if (obj.files) {//firefox6-
	            if (obj.files.item(0)) {
	                url = obj.files.item(0).getAsDataURL();
	                imgdom.src = url;
	            }
	        }
}