标签:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.min.js"></script> <script type="text/javascript"> /** * 从 file 域获取 本地图片 url */ function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE") >= 1 && !(navigator.userAgent.indexOf("MSIE 10.0") > 0) ) { // IE10取消了滤镜 //url = document.getElementById(sourceId).value; document.all.imgOne.select(); $("#preview").focus(); url = document.selection.createRange().text; } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); }else if(navigator.userAgent.indexOf("MSIE 10.0") > 0){ url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); }else{ url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } /** * 将本地图片 显示到浏览器上 */ function preImg(sourceId, targetId) { var url = getFileUrl(sourceId); var imgPre = document.getElementById(targetId); if(window.navigator.userAgent.indexOf("MSIE") >= 1 && !(navigator.userAgent.indexOf("MSIE 10.0") > 0) ) { var picpreview=document.getElementById("preview"); picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url; }else{ imgPre.src = url; } } </script> </head> <body> <form action=""> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,‘imgPre‘);" /> <div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:300px;height:300px;border:solid 1px black;"> <img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> </div> </form> </body> </html>
html中使用js浏览本地图片适用IE,火狐,Google浏览器
标签:
原文地址:http://my.oschina.net/u/140663/blog/375977