JavaScript图片上传前预览

来源：互联网发布：mac 推出硬盘编辑：程序博客网时间：2024/05/18 20:11

通过 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>

引用：http://wangyong31893189.iteye.com/blog/1695472

阅读全文

0 0