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

时间：2023-03-09 04:08:30
上传图片预览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>

相关文章