js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题

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

wingzhiliang

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

阅读量241

点赞数

分类专栏： WEB开发相关文章标签： JavaScript EXT Microsoft 脚本 ViewUI

WEB开发相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【此脚本参考网络资源，谢谢无名分享作者】

1、脚本，把下面代码加到<head>与</head>之间

<script type="text/javascript" language="javascript">
function PreviewImg(imgFile){
	 document.getElementById("idImg").style.display = "none";//隐藏初始化图片的显示,让过滤器显示
	 var newPreview=document.getElementById("newPreview");
	 remove(newPreview);
	 
	 var imgDiv=document.createElement("div");
	 document.body.appendChild(imgDiv);
	 imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
	 imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=imgFile.target.value;
		var img_object = document.getElementById("engineroom_layout_addr");
		img_object.style.display = "inline";
		img_object.src = addrObject.value;
		if (!img_object.width || img_object.width > 300) {
			imgDiv.style.width = "300px";
		}
		if (!img_object.height || img_object.height > 200) {
			imgDiv.style.height = "200px";
		}
		addrObject.style.display = "none";
	 //imgDiv.style.width="320px";
	 //imgDiv.style.height="127px";
	 newPreview.appendChild(imgDiv);
	 
}
//使用removeChild从文档中删除DOM节点
function remove(obj) {
	var test = obj;
	var children = test.childNodes;
	for (i = 0; i < children.length; i++) {
		test.removeChild(children[i]);
	}
}
</script>

2、在页面中添加DIV层来展示，IE9默认不显示预览，可参考title的说明设置

HTML页面代码：

<div style="padding:5px;margin-left: -5px">
		<table border="0" style="width:94%;border-collapse:collapse;background:#fff;"  title="无显示帮助：第一步：工具-- Internet选项-- 安全-- 自定义级别;第二步：向下拖，一直看到“将文件上载到服务器时包含本地目录路径”;第三步：选择启用。">
			<tr>
				<th style="background-color:#f0f0f0; height:20px;padding:5px;border:1px solid #ccc;font-weight: bolder;text-align: center;" width="40%">选择图片</th>
				<th style="background-color:#f0f0f0; height:20px;padding:5px;border:1px solid #ccc;font-weight: bolder;text-align: center;" width="70%">预览图</th>
			</tr>
			<tr>
				<td style="padding:5px;border:1px solid #ccc;"><INPUT id=engineroom_layout_addr class=inputbox name=engineroom_layout_addr/></td>
				<td align="center" style="padding:5px;border:1px solid #ccc;"><img id="idImg" style="display:none"/><div id="newPreview"></div></td>
			</tr>
		</table>
		<script type="text/javascript">
		    var addrObject = document.getElementById("engineroom_layout_addr");
		    addrObject.style.display = "none";//把机房显示输入框隐藏
			Ext.get('file_engineroom_layout_addr').on('change',function(obj){
				//crmsUtil.previewImg(obj.target,"idImg",300,200);//只适用于IE6
				PreviewImg(obj);
			});
			if(addrObject.value != ''){
				var img_object = document.getElementById("idImg");
				img_object.style.display = "inline";
				img_object.src = addrObject.value;
				if (!img_object.width || img_object.width > 300) {
					img_object.width = 300;
				}
				if (!img_object.height || img_object.height > 200) {
					img_object.height = 200;
				}
			}
		</script>
		</div>

wingzhiliang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题

【此脚本参考网络资源，谢谢无名分享作者】1、脚本，把下面代码加到&lt;head&gt;与&lt;/head&gt;之间 &lt;script type="text/javascript" language="javascript"&gt;function PreviewImg(imgFile){ document.getElementById("idImg").style...
复制链接

扫一扫