Javascript 本地图片预览
IE 的本地图片预览，使用 "file://localhost/"+file.value 的形式实现。或者使用 图片滤镜 来实现；
Chrome 和 FireFox 浏览器，使用 HTML5 中的 FileReader 对象来实现。
代码简陋：
1、图片滤镜：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <script type="text/javascript"> 6 function preImg(sourceId, targetId) { 7 if (typeof FileReader === 'undefined') { 8 var file = document.getElementById(sourceId); 9 var img = document.getElementById(targetId); 10 img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+file.value+"')"; 11 return; 12 } 13 var reader = new FileReader(); 14 15 reader.onload = function(e) { 16 var img = document.getElementById(targetId); 17 img.src = this.result; 18 }; 19 reader.readAsDataURL(document.getElementById(sourceId).files[0]); 20 } 21 </script> 22 </head> 23 <body> 24 <form action=""> 25 <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> 26 <img id="imgPre" width="100px;"/> 27 </form> 28 </body> 29 </html>
2、"file://localhost/"+file.value 的形式：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <script type="text/javascript"> 6 function preImg(sourceId, targetId) { 7 if (typeof FileReader === 'undefined') { 8 var file = document.getElementById(sourceId); 9 var img = document.getElementById(targetId); 10 img.src = "file://localhost/"+file.value ; 11 return; 12 } 13 var reader = new FileReader(); 14 15 reader.onload = function(e) { 16 var img = document.getElementById(targetId); 17 img.src = this.result; 18 } 19 reader.readAsDataURL(document.getElementById(sourceId).files[0]); 20 } 21 </script> 22 </head> 23 <body> 24 <form action=""> 25 <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> 26 <img id="imgPre" src="" style="display: block;" /> 27 </form> 28 </body> 29 </html>
