Javascript 本地图片预览
生活随笔
收集整理的這篇文章主要介紹了
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" οnchange="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" οnchange="preImg(this.id,'imgPre');" /> 26 <img id="imgPre" src="" style="display: block;" /> 27 </form> 28 </body> 29 </html>轉載于:https://www.cnblogs.com/evilgod528/archive/2012/08/06/2624603.html
總結
以上是生活随笔為你收集整理的Javascript 本地图片预览的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2021大连东港音乐喷泉能下海么
- 下一篇： Java泛型之泛型参数