HTML5实现预览本地图片


Posted in HTML / CSS onFebruary 17, 2016

问题描述
假设我们在 HTML 里面有一个图片上传控件:

复制代码
代码如下:

<input id="upload_image" type="file" name="image" accept="image/*" />

注意这个 accept="image/*" 非常重要,它指定了上传的是图片,在移动端的时候会关联到系统的弹窗选择类型等问题,务必加上。
然后,问题是,我们在没有提交这个表单到服务器之前,有没有办法把图片的内容读取出来呢?
看似简单,都是客户端的文件,应该是可以的,但在之前确实没什么好办法,但是自从有了HTML5,这个功能又回来了,通过FileReader可以轻松的实现这个功能。
例子说明问题

复制代码
代码如下:

$(function() {
$('#upload_image').change(function(event) {
// 根据这个 <input> 获取文件的 HTML5 js 对象
var files = event.target.files, file;
if (files && files.length > 0) {
// 获取目前上传的文件
file = files[0];
// 来在控制台看看到底这个对象是什么
console.log(file);
// 那么我们可以做一下诸如文件大小校验的动作
if(file.size > 1024 * 1024 * 2) {
alert('图片大小不能超过 2MB!');
return false;
}
// !!!!!!
// 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL
// 获取 window 的 URL 工具
var URL = window.URL || window.webkitURL;
// 通过 file 生成目标 url
var imgURL = URL.createObjectURL(file);
// 用这个 URL 产生一个 <img> 将其显示出来
$('body').append($('<img/>').attr('src', imgURL));
// 使用下面这句可以在内存中释放对此 url 的伺服,跑了之后那个 URL 就无效了
// URL.revokeObjectURL(imgURL);
}
});
});

简要说明
简单来说整个操作设计如下几步:
1.通过 <file> 的 change 事件触发事件,并且获取 event 对象;
2.通过 event 对象获取上传的文件的 js 对象 file ;
3.通过 window.URL 工具从 file 对象生成一个可用的 URL;
4.把这个 URL 置入使用;
5.*释放这个 URL 的伺服
关键点:
1.对于同一个 file ,每次调用 URL.createObjectURL 的时候,都会重新生成一个不同的 URL;
2.调用 URL.createObjectURL 的时候,浏览器自动在内存中开辟空间,用于伺服这个 URL,也就是使得这个 URL 可以请求成功;
3.如果调用了 URL.revokeObjectURL(imgURL); 之后,这个伺服就会关掉,再请求这个 URL 就会 404;
4.这一切都是客户端的事情,服务器端对此一无所知,包括你选择的这个图;
5.这个 imgURL 大概是这个样子:blob:http%3A//localhost%3A8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb

HTML / CSS 相关文章推荐
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 #HTML / CSS
HTML5未来发展趋势
Feb 01 #HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 #HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 #HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 #HTML / CSS
Html5 audio标签样式的修改
Jan 28 #HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 #HTML / CSS
You might like
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
php的扩展写法总结
2019/05/14 PHP
js表格分页实现代码
2009/09/18 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python版DDOS攻击脚本
2019/06/12 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
酒店司机岗位职责
2013/12/14 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
护理专科自荐书范文
2014/02/18 职场文书
高考寄语大全
2014/04/08 职场文书
双方协议书
2014/04/22 职场文书
街道社区活动报告
2015/02/05 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
退伍军人感言
2015/08/01 职场文书
公历12个月名称的由来
2022/04/12 杂记