码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 图片的上传前预览(兼容所有浏览器)

时间:2016-12-09 14:05:59      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:char   meta   targe   div   ie10   hang   text   span   str   

功能描述

 

通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+、Chrome、Firefox)。

 

实现要点

 

● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。

● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。

 <!DOCTYPE html>  
 <html>  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
<style type="text/css">  
 #preview, .img, img  
 {  
 width:200px;  
 height:200px;  
 }  
 #preview  
 {  
border:1px solid #000;  
}  
 </style>  
 </head>  
<body>  
 <div id="preview"></div>  
<input type="file" onchange="preview(this)" />  
 <script type="text/javascript">    
 function preview(file)  
 {  
 var prevDiv = document.getElementById(preview);  
 if (file.files && file.files[0])  
 {  
 var reader = new FileReader();  
 reader.onload = function(evt){  
 prevDiv.innerHTML = <img src=" + evt.target.result + " />;  
}    
 reader.readAsDataURL(file.files[0]);  
}  
 else    
 {  
 prevDiv.innerHTML = <div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘ + file.value + \‘"></div>;  
 }  
 }  
 </script>  
 </body>  
 </html>

 

JavaScript 图片的上传前预览(兼容所有浏览器)

标签:char   meta   targe   div   ie10   hang   text   span   str   

原文地址:http://www.cnblogs.com/ahu666/p/6149196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!