查看文章 |
[转]使用Javascript预览本地图片
2009-10-12 18:02
很久很久以前，那时候还是IE的天下，使用Javascript预览本地图片实现起来非常简单，就是设置一下： document.getElementById("image").src = "file:///" + document.getElementById("input").value; 不过出于安全的考虑，现在的浏览器都不允许...src = file:///...这样的写法，作为替代，IE可以使用“DXImageTransform.Microsoft.AlphaImageLoader”滤镜的方式，而Firefox则提供了一个getAsDataURL方法。 01 <html> 02 <head> 03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 04 <title>preview</title> 05 <style> 06 #preview { 07 width: 270px; 08 height: 129px; 09 } 10 </style> 11 <!--[if IE]> 12 <style> 13 #preview { 14 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 15 } 16 </style> 17 <![endif]--> 18 </head> 19 20 <body> 21 <input id="file" type="file" /> 22 <div id="preview"> 23 <img id="image" src="http://www.baidu.com/img/baidu_logo.gif" /> 24 </div> 25 <script> 26 document.getElementById("file").onchange = function() { 27 if ("Microsoft Internet Explorer" == navigator.appName) { 28 var preview = document.getElementById("preview"); 29 preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = this.value; 30 document.getElementById("image").style.display = "none"; 31 } else if ("Netscape" == navigator.appName){ 32 document.getElementById("image").src = this.files[0].getAsDataURL(); 33 } else { 34 alert("Not Support!"); 35 } 36 } 37 </script> 38 </body> 39 </html> |
最近读者：
