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>

 

posted @ 2015-03-23 18:02  joshua317  阅读(173)  评论(0)    收藏  举报