图片预览

 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>