上传图片预览JS脚本 Input file图片预览的实现示例

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>By：DragonDean</title>
 <script type="text/javascript">
 //下面用于图片上传预览功能
 function setImagePreview(avalue) {

     var docObj=document.getElementById("doc");
     var imgObjPreview=document.getElementById("preview");
     //files属性：返回一个 Files 集合，由指定文件夹中包含的所有 File 对象组成，包括设置了隐藏和系统文件属性的文件。
     if(docObj.files &&docObj.files[0]){
         //火狐下，直接设img属性
         imgObjPreview.style.display = 'block';
         imgObjPreview.style.width = '150px';
         imgObjPreview.style.height = '180px';
         //imgObjPreview.src = docObj.files[0].getAsDataURL();

         //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

         imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
     }else{
         //IE下，使用滤镜
         //
         docObj.select();
         var imgSrc = document.selection.createRange().text;
         var localImagId = document.getElementById("localImag");
         //必须设置初始大小
         localImagId.style.width = "150px";
         localImagId.style.height = "180px";
         //图片异常的捕捉，防止用户修改后缀来伪造图片
         try{
         localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
         localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
         }
         catch(e)
         {
         alert("您上传的图片格式不正确，请重新选择!");
         return false;
         }
         imgObjPreview.style.display = 'none';
         document.selection.empty();
     }
     return true;
 }

 </script>
 </head>

 <body>
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tbody>
             <tr>
                 <td height="101" align="center">
                     <div id="localImag">
                         <img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;">
                     </div>
                 </td>
             </tr>
             <tr>
                 <td align="center" style="padding-top:10px;">
                     <input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();">
                 </td>
             </tr>
         </tbody>
     </table>
 </body>
 </html>