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和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 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
一个取得文件扩展名的函数
2006/10/09 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
javascript 数组排序函数
2009/08/20 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python常用内置函数总结
2015/02/08 Python
Python模块搜索路径代码详解
2018/01/29 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
Python的collections模块真的很好用
2021/03/01 Python
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
父亲追悼会答谢词
2014/01/17 职场文书
环保倡议书50字
2014/05/15 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android
Rust中的Struct使用示例详解
2022/08/14 Javascript