网上找到的一份文件上传前预览的代码, 转自 JavaScript 图片的上传前预览(兼容所有浏览器)
- <!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>
实现要点
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
测试了一下 IE8 + 都没有问题。但是 IE7 下 file.value 被浏览器去掉了文件路径分割线从而显示不出来
来源: http://www.jb51.net/article/91182.htm