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 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
HTML中的表单Form实现居中效果
May 25 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程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php伪静态之APACHE篇
2014/06/02 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python中for语句简单遍历数据的方法
2015/05/07 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python中的asyncio代码详解
2019/06/10 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python django生成迁移文件的实例
2019/08/31 Python
Python chardet库识别编码原理解析
2020/02/18 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
初中生期末评语大全
2014/04/24 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
幼儿园感谢信
2015/01/21 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python