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中的Transition
Jul 15 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
asp 的 分词实现代码
2007/05/24 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
市场营销工作计划书
2014/05/06 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
领导干部作风建设总结
2014/10/23 职场文书
会议主持词开场白
2015/05/28 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript