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

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=http://www.mamicode.com/imgFile.target.value;11         var img_object = document.getElementById("engineroom_layout_addr");12         img_object.style.display = "inline";13         img_object.src =http://www.mamicode.com/ 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);//只适用于IE617                 PreviewImg(obj);18             });19             if(addrObject.value != ‘‘){20                 var img_object = document.getElementById("idImg");21                 img_object.style.display = "inline";22                 img_object.src =http://www.mamicode.com/ 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>

 

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