上传图片立即预览_web前端技术

夜鹰教程网-程序员的加油站

·设为首页·加入收藏

本站首页技术文章全套前端云课堂智慧校园

你好，欢迎来到夜鹰网！【去购买教程】

当前位置：文章中心 >> web前端技术

上传图片立即预览

夜鹰教程网来源：www.yyjcw.com 日期：2018-7-1 15:36:10

真正实现兼容IE6以上主流浏览器-上传图片预览(注意请不用IE Tester测试,IE Tester下input file完全点不了,我是直接用虚拟机真实IE测试)

另外这里只列出了前端页面，后台处理的话可以看看我的这篇文章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

复制链接网友评论收藏本文关闭此页

上一条：移动端视口的相关概念及其适配方案… 下一条： web worker 实现js多线程

夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。详细咨询QQ：1416759661 夜鹰教程网