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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
细说CSS3中的选择符
Oct 17 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 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新手上路(十一)
2006/10/09 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
函授大专自我鉴定
2013/11/01 职场文书
机械个人求职信范文
2014/01/24 职场文书
高二化学教学反思
2014/01/30 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
优秀经理获奖感言
2014/03/04 职场文书
教师节主持词开场白
2015/05/29 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android