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>