js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题
【此脚本参考网络资源，谢谢无名分享作者】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);}}</script>
2、在页面中添加DIV层来展示，IE9默认不显示预览，可参考title的说明设置
http://dl.iteye.com/upload/attachment/470148/f91283e3-e6dc-3a52-bf1c-0ad5ab64becc.jpg
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);//只适用于IE6PreviewImg(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>
页:
[1]