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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
html+css实现环绕倒影加载特效
Jul 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Python如何输出百分比
2020/07/31 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
财务总经理岗位职责
2014/02/16 职场文书
老公给老婆的保证书
2014/04/28 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
英语系毕业生求职信
2014/07/13 职场文书