js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题
1 <script type="text/javascript" language="javascript"> 2 function PreviewImg(imgFile){ 3 document.getElementById("idImg").style.display = "none";//隐藏初始化图片的显示,让过滤器显示 4 var newPreview=document.getElementById("newPreview"); 5 remove(newPreview); 6 7 var imgDiv=document.createElement("div"); 8 document.body.appendChild(imgDiv); 9 imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 10 imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=imgFile.target.value; 11 var img_object = document.getElementById("engineroom_layout_addr"); 12 img_object.style.display = "inline"; 13 img_object.src = addrObject.value; 14 if (!img_object.width || img_object.width > 300) { 15 imgDiv.style.width = "300px"; 16 } 17 if (!img_object.height || img_object.height > 200) { 18 imgDiv.style.height = "200px"; 19 } 20 addrObject.style.display = "none"; 21 //imgDiv.style.width="320px"; 22 //imgDiv.style.height="127px"; 23 newPreview.appendChild(imgDiv); 24 25 } 26 //使用removeChild从文档中删除DOM节点 27 function remove(obj) { 28 var test = obj; 29 var children = test.childNodes; 30 for (i = 0; i < children.length; i++) { 31 test.removeChild(children[i]); 32 } 33 } 34 </script>
2、在页面中添加DIV层来展示,IE9默认不显示预览,可参考title的说明设置
1 <div style="padding:5px;margin-left: -5px"> 2 <table border="0" style="width:94%;border-collapse:collapse;background:#fff;" title="无显示帮助:第一步:工具-- Internet选项-- 安全-- 自定义级别;第二步:向下拖,一直看到“将文件上载到服务器时包含本地目录路径”;第三步:选择启用。"> 3 <tr> 4 <th style="background-color:#f0f0f0; height:20px;padding:5px;border:1px solid #ccc;font-weight: bolder;text-align: center;" width="40%">选择图片</th> 5 <th style="background-color:#f0f0f0; height:20px;padding:5px;border:1px solid #ccc;font-weight: bolder;text-align: center;" width="70%">预览图</th> 6 </tr> 7 <tr> 8 <td style="padding:5px;border:1px solid #ccc;"><INPUT id=engineroom_layout_addr class=inputbox name=engineroom_layout_addr/></td> 9 <td align="center" style="padding:5px;border:1px solid #ccc;"><img id="idImg" style="display:none"/><div id="newPreview"></div></td> 10 </tr> 11 </table> 12 <script type="text/javascript"> 13 var addrObject = document.getElementById("engineroom_layout_addr"); 14 addrObject.style.display = "none";//把机房显示输入框隐藏 15 Ext.get(‘file_engineroom_layout_addr‘).on(‘change‘,function(obj){ 16 //crmsUtil.previewImg(obj.target,"idImg",300,200);//只适用于IE6 17 PreviewImg(obj); 18 }); 19 if(addrObject.value != ‘‘){ 20 var img_object = document.getElementById("idImg"); 21 img_object.style.display = "inline"; 22 img_object.src = addrObject.value; 23 if (!img_object.width || img_object.width > 300) { 24 img_object.width = 300; 25 } 26 if (!img_object.height || img_object.height > 200) { 27 img_object.height = 200; 28 } 29 } 30 </script> 31 </div>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。