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 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
使用CSS实现音波加载效果
May 07 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
Drupal7中常用的数据库操作实例
2014/03/02 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
js 操作符汇总
2014/11/08 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
javascript this详细介绍
2016/09/19 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python三级目录展示的实现方法
2016/09/28 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python学生管理系统开发
2019/01/30 Python
Django的models模型的具体使用
2019/07/15 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
全球性的女装店:storets
2019/06/12 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
年度考核评语
2014/01/19 职场文书
学生手册家长评语
2014/02/10 职场文书
2015年工商所工作总结
2015/05/21 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书