JS implementation of the image before uploading preview, to achieve the perfect compatibility with FIREFOX3,IE6,IE7,IE8 and IE9 display problems

1<script type= "Text/javascript" language= "JavaScript" >2 functionpreviewimg (imgfile) {3document.getElementById ("Idimg"). Style.display = "None";//hide the display of the initialized image so that the filter is displayed4      varNewpreview=document.getelementbyid ("Newpreview");5 Remove (newpreview);6      7      varImgdiv=document.createelement ("div");8 Document.body.appendChild (imgdiv);9Imgdiv.style.filter= "Progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod=scale)";TenImgDiv.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src=ImgFile.target.value; One         varImg_object = document.getElementById ("Engineroom_layout_addr"); AImg_object.style.display = "inline"; -IMG_OBJECT.SRC =Addrobject.value; -         if(!img_object.width | | img_object.width > 300) { theImgDiv.style.width = "300px"; -         } -         if(!img_object.height | | img_object.height > 200) { -ImgDiv.style.height = "200px"; +         } -AddrObject.style.display = "None"; +      //imgdiv.style.width= "320px"; A      //imgdiv.style.height= "127px"; at Newpreview.appendchild (imgdiv); -       - } - //To remove a DOM node from a document using RemoveChild - functionRemove (obj) { -     varTest =obj; in     varChildren =Test.childnodes; -      for(i = 0; i < children.length; i++) { to Test.removechild (Children[i]); +     } - } the</script>

2, add div layer in the page to show, IE9 default does not show preview, can refer to the description of the title set

1<div style= "Padding:5px;margin-left: -5px" >2<table border= "0" style= "width:94%;border-collapse:collapse;background: #fff;" Title= "No display Help: First step: Tools-Internet Options-security-custom level; Step two: Drag down to see" include local directory path when uploading files to server "; step three: Select Enable. ">3<tr>4<th style= "Background-color: #f0f0f0; height:20px;padding:5px;border:1px solid #ccc; font-weight:bolder;text-align:center; "Width=" 40% "> select Picture </th >5<th style= "Background-color: #f0f0f0; height:20px;padding:5px;border:1px solid #ccc; font-weight:bolder;text-align:center; "Width=" 70% "> Preview map </th >6</tr>7<tr>8&LT;TD style= "padding:5px;border:1px solid #ccc;" ><input id=engineroom_layout_addr Class=inputbox name=engineroom_layout_addr/></td>9&LT;TD align= "center" style= "padding:5px;border:1px solid #ccc;" ><div id= "Newpreview" ></div></td>Ten</tr> One</table> A<script type= "Text/javascript" > -             varAddrobject = document.getElementById ("Engineroom_layout_addr"); -AddrObject.style.display = "None";//Hide the display input box in the computer room theExt.get (' file_engineroom_layout_addr '). On (' Change ',function(obj) { -                 //crmsutil.previewimg (Obj.target, "idimg", 300,200);//Only applicable to IE6 - previewimg (obj); -             }); +             if(Addrobject.value! = "){ -                 varImg_object = document.getElementById ("idimg"); +Img_object.style.display = "inline"; AIMG_OBJECT.SRC =Addrobject.value; at                 if(!img_object.width | | img_object.width > 300) { -Img_object.width = 300; -                 } -                 if(!img_object.height | | img_object.height > 200) { -Img_object.height = 200; -                 } in             } -</script> to</div>

JS implementation of the image before uploading preview, to achieve the perfect compatibility with FIREFOX3,IE6,IE7,IE8 and IE9 display problems