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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 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_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python检测IP地址变化并触发事件
2018/12/26 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
《童年》教学反思
2014/02/18 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
店铺转让协议书
2015/01/29 职场文书
数学教师求职信范文
2015/03/20 职场文书
物流业务员岗位职责
2015/04/03 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis