Preview image when uploading it on client side. Available for IE and FF

1. CSS

<style type="text/css"> body{margin:0px;} /*.title { background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D); background-repeat:repeat-x; height:28px; line-height: 28px; text-align:center; }*//*data url test*/ #divPreview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:100%; height:100%; } </style>

 

2. JS

<script type="text/javascript"> function Preview() { var x = document.getElementById("fileUpload1"); if (!x || !x.value) return; var patn = //.jpg$|/.jpeg$|/.gif$/i; if (patn.test(x.value)) { if (navigator.appName == "Microsoft Internet Explorer") { var divPreview = document.getElementById("divPreview"); divPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = x.value; divPreview.style.display = 'block'; } else if (navigator.appName == "Netscape") { var y = document.getElementById("imgPreview"); y.src = document.getElementById('fileUpload1').files.item(0).getAsDataURL(); y.style.display = "block"; } } else { alert("您选择的似乎不是图像文件。"); } } </script>

 

3. HTML

<div> <table cellpadding="0" cellspacing="0" border="1"> <tr> <td style="width:150px;height:150px;"> <div id="divPreview" style="display:none;" mce_style="display:none;"> </div><%--display for IE--%> <img id="imgPreview" src="" style="display:none; width:100%; height:100%;" alt="图片在此显示"/><%--display for Firefox--%> </td> <td> <input type="file" name="fileUpload1" id="fileUpload1" onchange="Preview()" /> </td> </tr> </table> </div>