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 相关文章推荐
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
CSS的calc函数用法小结
Jun 25 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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
Dedecms常用函数解析
2008/02/01 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
php排序算法实例分析
2016/10/17 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
javascript中onclick(this)用法介绍
2013/04/19 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python删除列表中重复记录的方法
2015/04/28 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
英语专业学生个人求职信范文
2014/01/06 职场文书
保护环境的建议书
2014/03/12 职场文书
优秀大学生自荐信
2014/06/09 职场文书
西双版纳导游词
2015/02/03 职场文书
商务司机岗位职责
2015/04/10 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
《我是什么》教学反思
2016/02/16 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
基于angular实现树形二级表格
2021/10/16 Javascript