码迷,mamicode.com
首页 > 其他好文 > 详细

图片预览

时间:2015-06-05 12:09:03      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <script type="text/javascript">
 6 /**
 7 * 从 file 域获取 本地图片 url
 8 */
 9 function getFileUrl(sourceId) {
10 var url;
11 if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
12 url = document.getElementById(sourceId).value;
13 } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
14 url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
15 } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
16 url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
17 }
18 return url;
19 }
20 
21 /**
22 * 将本地图片 显示到浏览器上
23 */
24 function preImg(sourceId, targetId) {
25 var url = getFileUrl(sourceId);
26 var imgPre = document.getElementById(targetId);
27 imgPre.src = url;
28 }
29 </script>
30 </head>
31 <body>
32 <form action="">
33 <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,‘imgPre‘);" />
34 <img id="imgPre" src="" width="300px" height="300px" style="display: block;" />
35 </form>
36 </body>
37 </html> 

 

图片预览

标签:

原文地址:http://www.cnblogs.com/itboy-2009/p/4553903.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!