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 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 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版(5)
2006/10/09 PHP
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
php header()函数使用说明
2008/07/10 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
python实现自动更换ip的方法
2015/05/05 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
在校生自我鉴定
2014/01/23 职场文书
活动策划邀请函
2014/02/06 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
小学学校评估方案
2014/06/08 职场文书
体育教师个人总结
2015/02/09 职场文书
清洁工岗位职责
2015/02/13 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书