本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、毕业设计辅导
 当前位置:文章中心 >> web前端技术
立即购买视频教程 上传图片立即预览
夜鹰教程网 来源:www.yyjcw.com 日期:2017/7/1 15:36:10
分享到:
真正实现兼容IE6以上主流浏览器-上传图片预览(注意请不用IE Tester测试,IE Tester下input file完全点不了,我是直接用虚拟机真实IE测试)

这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。


另外这里只列出了前端页面,后台处理的话可以看看我的这篇文章http://blog.csdn.net/jdfkldjlkjdl/article/details/40659823

下面是源代码:


[html] view plain copy print?

  1. <!DOCTYPE html>  

  2. <html xmlns="http://www.w3.org/1999/xhtml">  

  3. <head>  

  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

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

  6.     <style type="text/css">  

  7.         .ctrl-file {  

  8.             height: 30px;  

  9.             width: 70px;  

  10.             display: inline-block;  

  11.             *display: inline;  

  12.             *zoom: 1;  

  13.             overflow: hidden;  

  14.             position: relative;  

  15.         }  

  16.   

  17.             .ctrl-file .filehide {  

  18.                 position: absolute;  

  19.                 z-index: 10;  

  20.                 opacity: 0;  

  21.                 font-size: 60px;  

  22.                 filter: alpha(opacity = 0);  

  23.                 width: 70px;  

  24.                 height: 30px;  

  25.                 left: 0;  

  26.                 top: 0;  

  27.             }  

  28.   

  29.             .ctrl-file a {  

  30.                 width: 70px;  

  31.                 line-height: 30px;  

  32.                 height: 30px;  

  33.                 display: block;  

  34.                 background: #000;  

  35.                 color: #fff;  

  36.                 font-family: '微软雅黑';  

  37.                 font-size: 14px;  

  38.                 text-align: center;  

  39.                 text-decoration: none;  

  40.                 border-radius: 5px;  

  41.             }  

  42.     </style>  

  43. </head>  

  44. <body>  

  45.     <span class="ctrl-file">  

  46.         <input type="file" class="filehide" name="filehide" onchange="filechange(this)" />  

  47.         <a href="#">浏 览</a>  

  48.     </span>  

  49.     <div>  

  50.         <img src="" id="imgview" style="display:none;" alt="" />  

  51.     </div>  

  52. </body>  

  53. </html>  

  54. <script type="text/javascript">  

  55.     function $(id) {  

  56.         return document.getElementById(id);  

  57.     }  

  58.   

  59.     function filechange(file) {  

  60.         if (file.files && file.files[0]) {  

  61.             var reader = new FileReader();  

  62.             reader.onload = function (evt) {  

  63.                 showimg(evt.target.result);  

  64.             };  

  65.             reader.readAsDataURL(file.files[0]);  

  66.         } else {  

  67.             file.select();  

  68.             var src = document.selection.createRange().text;  

  69.             showimg(src);  

  70.         }  

  71.     }  

  72.   

  73.     function showimg(src) {  

  74.         var img = $('imgview');  

  75.         img.src = src;  

  76.         img.style.display = 'block';  

  77.     }  

  78. </script>  


源码下载:http://pan.baidu.com/s/1pJ5G1uV



复制链接 网友评论 收藏本文 关闭此页
上一条: 移动端视口的相关概念及其适配方案…  下一条: web worker 实现js多线程
购买夜鹰教程网视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  购买教程
  热点推荐
XML Schema学习笔记(1)
XML Schema学习笔记(2)
C#对XML文档的操作
ASP操作XMLDOM
XML入门教程:分析XML
百度新闻开放协议XML文档制作方法…
XSL 语言
用RSS做五分钟一自动更新的网站
XML入门教程:文档类型声明
XML教程:通过一个例子来学习XML的…
XML节点相关知识
把XML文件绑定到列表控件
XML+XSLT+CSS+JQuery+WebService组…
XHTML头部Doctype声明必不可少!
历数Firefox2.0对XML处理的改进
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
新手所必须掌握的前端知识汇总
移动端视口的相关概念及其适配方案…
上传图片立即预览
web worker 实现js多线程
文件断点续传的实现
在项目中使用 IScroll问题总结
APP中图片的压缩与上传
git常用命令汇总
Git 常用命令介绍
Grunt.js学习教程
webpack学习指南
Webpack教程01
微信小程序第一批吃螃蟹的人
前端面试题-事件监听、继承、闭包…
HTML5 Canvas学习笔记-处理鼠标事…
  工具下载  需要远程协助? 购买教程

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
vs2012 vs2008 vs2010 sql2008 sql2005
Asp.Net  

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

关于我们 | 广告投放 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接 | 购买教程

Nighthawk Tutorials Network 快捷购买教程

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3

 

出售asp.net系列视频教程 高清原创版 每天晚上20:30--23:00在线 按照编号从简单到高级 http://www.yyjcw.com/list.html