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最新技术(与图片背景相关)
Dec 24 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
PHP创建XML接口示例
2019/07/04 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JavaScript弹窗基础篇
2016/04/27 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python实现选择排序
2017/06/04 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
50岁生日感言
2014/01/23 职场文书
《影子》教学反思
2014/02/21 职场文书
出纳会计岗位职责
2014/03/12 职场文书
人代会标语
2014/06/30 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
停车场管理制度范本
2015/08/05 职场文书