HTML5图片预览实例分享


Posted in HTML / CSS onJune 04, 2014

HTML5图片预览需要用到两种方法

    1.URL
    2.FileReader
直接上代码

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5 图片上传预览</title>
<style>
#preview {
width: 300px;
height: 300px;
overflow: hidden;
}
#preview img {
width: 100%;
height: 100%;
}
</style>
<script src="../jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
function preview1(file) {
var img = new Image(), url = img.src = URL.createObjectURL(file)
var $img = $(img)
img.onload = function() {
URL.revokeObjectURL(url)
$('#preview').empty().append($img)
}
}
function preview2(file) {
var reader = new FileReader()
reader.onload = function(e) {
var $img = $('<img>').attr("src", e.target.result)
$('#preview').empty().append($img)
}
reader.readAsDataURL(file)
}

$(function() {
$('[type=file]').change(function(e) {
var file = e.target.files[0]
preview1(file)
})
})
</script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
<input type="file" name="imageUpload"/>
<div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
</html>

其中URL.revokeObjectURL方法Opera不支持,FileReader除IE9及以下不支持,其它浏览器都支持。

HTML / CSS 相关文章推荐
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 #HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 #HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 #HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 #HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 #HTML / CSS
html5设计原理(推荐收藏)
May 17 #HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 #HTML / CSS
You might like
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
深入浅出php socket编程
2015/05/13 PHP
php编程每天必学之表单验证
2016/03/01 PHP
php单链表实现代码分享
2016/07/04 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
微信小程序progress组件使用详解
2018/01/31 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python根据文件大小打log日志
2014/10/09 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
表彰会主持词
2014/03/26 职场文书
语文教育专业求职信
2014/06/28 职场文书
护士节活动总结
2014/08/29 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
开学第一周值周总结
2015/07/16 职场文书