當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 图片的上传前预览（兼容所有浏览器）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 图片的上传前预览（兼容所有浏览器）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
功能描述
?
通過?JavaScript?實現圖片的本地預覽（無需上傳至服務器），兼容所有瀏覽器（IE6&IE6+、Chrome、Firefox）。
?
實現要點
?
●?對于?Chrome、Firefox、IE10?使用?FileReader?來實現。
●?對于?IE6~9?使用濾鏡?filter:progid:DXImageTransform.Microsoft.AlphaImageLoader?來實現。
?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 5 <style type="text/css"> 6 #preview, .img, img 7 { 8 width:200px; 9 height:200px; 10 } 11 #preview 12 { 13 border:1px solid #000; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="preview"></div> 19 <input type="file" onchange="preview(this)" /> 20 <script type="text/javascript"> 21 function preview(file) 22 { 23 var prevDiv = document.getElementById('preview'); 24 if (file.files && file.files[0]) 25 { 26 var reader = new FileReader(); 27 reader.onload = function(evt){ 28 prevDiv.innerHTML = '<img src="' + evt.target.result + '" />'; 29 } 30 reader.readAsDataURL(file.files[0]); 31 } 32 else 33 { 34 prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>'; 35 } 36 } 37 </script> 38 </body> 39 </html>?
總結
以上是生活随笔為你收集整理的JavaScript 图片的上传前预览（兼容所有浏览器）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： centos minimal Bind
- 下一篇： 浏览器中的XML与JavaScript