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 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 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 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php5.3 注意事项说明
2013/07/01 PHP
php常用数学函数汇总
2014/11/21 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
浅谈js中的bind
2019/03/18 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
Python每天必学之bytes字节
2016/01/28 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python构建基础的爬虫教学
2018/12/23 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
银行员工职业规划范文
2014/01/21 职场文书
学习十八大演讲稿
2014/09/15 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
优秀校长事迹材料
2014/12/24 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python