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 相关文章推荐
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 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
安装APACHE
2007/01/15 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
input的focus方法使用
2010/03/13 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
django正续或者倒序查库实例
2020/05/19 Python
浅谈Python3中print函数的换行
2020/08/05 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
教师创先争优承诺书
2015/04/27 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android