html5图片上传预览示例分享


Posted in HTML / CSS onApril 14, 2014

复制代码
代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="author" content="EdieLei" />
<title>HTML5 图片上传预览</title>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script</a>>
<script type="text/javascript">
$(function(){
$('#img').change(function(){
var file = this.files[0]; //选择上传的文件
var r = new FileReader();
r.readAsDataURL(file); //Base64
$(r).load(function(){
$('div').html('<img src="'+ this.result +'" alt="" />');
});
});
});
</script>
</head>
<body>
<h3>HTML5 图片上传预览</h3>
<input id="img" type="file" accept="image/*" />
<div></div>
</body>
</html>
HTML / CSS 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 #HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 #HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 #HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 #HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 #HTML / CSS
为你的html5网页添加音效示例
Apr 03 #HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 #HTML / CSS
You might like
php购物网站支付paypal使用方法
2010/11/28 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
js Array对象的扩展函数代码
2013/04/24 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
Bootstrap Table使用整理(二)
2017/06/09 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
《狼》教学反思
2014/03/02 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
简单租房协议书
2014/10/21 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
布达拉宫导游词
2015/02/02 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技