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绘制出各种几何图形
Aug 17 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
CSS浮动引起的高度塌陷问题
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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
eclipse php wamp配置教程
2016/06/30 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Python选课系统开发程序
2016/09/02 Python
django缓存配置的几种方法详解
2018/07/16 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
python add_argument()用法解析
2020/01/29 Python
Python实现上下文管理器的方法
2020/08/07 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
python中K-means算法基础知识点
2021/01/25 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
给校长的建议书200字
2014/05/16 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电