|
另外这里只列出了前端页面，后台处理的话可以看看我的这篇文章http://blog.csdn.net/jdfkldjlkjdl/article/details/40659823 下面是源代码:
[html] view plain copy print? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>真正实现兼容IE6以上主流浏览器-上传图片预览(注意请不用IE Tester测试,IE Tester下input file完全点不了,我是直接用虚拟机真实IE测试)</title> <style type="text/css"> .ctrl-file { height: 30px; width: 70px; display: inline-block; *display: inline; *zoom: 1; overflow: hidden; position: relative; } .ctrl-file .filehide { position: absolute; z-index: 10; opacity: 0; font-size: 60px; filter: alpha(opacity = 0); width: 70px; height: 30px; left: 0; top: 0; } .ctrl-file a { width: 70px; line-height: 30px; height: 30px; display: block; background: #000; color: #fff; font-family: '微软雅黑'; font-size: 14px; text-align: center; text-decoration: none; border-radius: 5px; } </style> </head> <body> <span class="ctrl-file"> <input type="file" class="filehide" name="filehide" onchange="filechange(this)" /> <a href="#">浏 览</a> </span> <div> <img src="" id="imgview" style="display:none;" alt="" /> </div> </body> </html> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function filechange(file) { if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function (evt) { showimg(evt.target.result); }; reader.readAsDataURL(file.files[0]); } else { file.select(); var src = document.selection.createRange().text; showimg(src); } } function showimg(src) { var img = $('imgview'); img.src = src; img.style.display = 'block'; } </script>
源码下载:http://pan.baidu.com/s/1pJ5G1uV
|