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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 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中static静态变量的使用方法详解
2010/06/04 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python简单实现控制电脑的方法
2018/01/22 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Django stark组件使用及原理详解
2019/08/22 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Python-opencv 双线性插值实例
2020/01/17 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
网络程序员自荐信
2014/01/25 职场文书
公司拓展活动方案
2014/02/13 职场文书
公司晚会主持词
2014/03/22 职场文书
2015年售票员工作总结
2015/04/29 职场文书
小学班主任培训心得体会
2016/01/07 职场文书