实现要点
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
注:Chrome和IE10是可以实现的,IE9不可以。
实现代码
- <!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" οnchange="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>
原作者:微米博客(不是我不加链接,而是百度空间换了地址,找不到了,勿怪!)