[转]兼容所有浏览器缩略预览图-JS代码

这个太强大了，一定得收藏起来

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <script>
 7 var picPath;
 8 var image;
 9 // preview picture
10 function preview()
11 {
12 //缩略的大小限制
13 var tHeight=100;
14 var tWidth=100;
15         //计算缩略尺寸
16         if(image.height>tHeight || image.width>tWidth)
17         {
18             if (tHeight >= tWidth)
19             {
20                 image.height = parseInt(Math.floor(parseFloat(image.height) * (parseFloat(tWidth)
21                 /parseFloat(image.width))));
22     image.width=tWidth;
23             }
24             else
25             {
26                 image.width = parseInt(Math.floor(parseFloat(image.width) * (parseFloat(tHeight)
27                 / parseFloat(image.height))));
28     image.height=tHeight;
29             }
30         }
31   // 下面代码用来获得图片尺寸，这样才能在IE下正常显示图片
32   //document.getElementById('box').innerHTML
33   //  = "<img width='"+image.width+"' height='"+image.height+"' id='aPic' src='"+picPath+"'>";
34   //输出缩略图片
35   var suo=document.getElementById('tupimg');
36   suo.width=image.width;
37   suo.height=image.height;
38   suo.src=picPath;
39 }
40 
41 function loadImage(ele) {
42   //首先加载位置
43   picPath   = getPath(ele);
44   image     = new Image();
45   image.src = picPath;
46   setTimeout(preview, 1000);
47 }
48 //不同浏览器获取上次控件方法
49 function getPath(obj)
50 {
51   if(obj)
52   {
53     //ie
54     if (window.navigator.userAgent.indexOf("MSIE")>=1)
55     {
56       obj.select();
57       // IE下取得图片的本地路径
58       return document.selection.createRange().text;
59     }
60     //firefox
61     else if(window.navigator.userAgent.indexOf("Firefox")>=1)
62     {
63       if(obj.files)
64       {
65         // Firefox下取得的是图片的数据
66         return obj.files.item(0).getAsDataURL();
67       }
68       return obj.value;
69     }
70     return obj.value;
71   }
72 }
73 </script>
74 </head>
75 <body>
76 <input type="file" id="fp" onchange='loadImage(this)' />
77 <div id='box'></div>
78 <img src="" id="tupimg"/>
79 </body>
80 </html>

下面是另外一个

先收藏着，等自己也来个

View Code

 1  <!DOCTYPE html>
 2   <html>
 3   <head>
 4   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 5   <style type="text/css">
 6   #preview, .img, img
 7   {
 8   width:200px;
 9   height:200px;
10   }
11   #preview
12   {
13   border:1px solid #000;
14   }
15   </style>
16   </head>
17   <body>
18   <div id="preview"></div>
19   <input type="file" onchange="preview(this)" />
20   <script type="text/javascript">  
21   function preview(file)
22   {
23   var prevDiv = document.getElementById('preview');
24   if (file.files && file.files[0])
25   {
26   var reader = new FileReader();
27   reader.onload = function(evt){
28   prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
29   }  
30   reader.readAsDataURL(file.files[0]);
31   }
32   else  
33   {
34   prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
35   }
36   }
37   </script>
38   </body>
39   </html>

原文链接：http://worm128.blog.163.com/blog/static/56772149200992995957239/

posted on 2013-01-25 14:33 tianqing52 阅读(128) 评论(0) 收藏举报