HTML5实现预览本地图片
发布时间：2016-02-17 11:00:59 作者：佚名 
我要评论
我要评论这篇文章主要介绍了HTML5实现预览本地图片 的相关资料,需要的朋友可以参考下
问题描述
假设我们在 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
相关文章
- IndexedDB 是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。下面通过本文重点给大家介绍HTML5本地存储之IndexedDB的相关知识，感兴趣的朋友一起看看吧2017-06-16
- 我们在做页面时会用到本地存储的时候，今天说说localStorage本地存储。感兴趣的朋友一起学习吧2017-06-16
- html5的两种存储技术的最大区别就是生命周期，接下来通过本文给大家分享HTML5 LocalStorage 本地存储刷新值还在问题以及使用方法小结，需要的的朋友参考下本文吧2017-03-10
- 本篇文章主要介绍了HTML5 LocalStorage 本地存储 ，HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。有兴趣的可以了解2016-12-23
- 这篇文章主要介绍了html5本地存储 localStorage操作使用详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-20
- 这篇文章主要介绍了Html5 web本地存储实例详解的相关资料,需要的朋友可以参考下2016-07-28
- 下面小编就为大家带来一篇深入剖析webstorage[html5的本地数据处理]。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-07-11
- 这篇文章主要为大家详细介绍了HTML5本地存储之Web Storage的相关资料，Web Storage如何用JSON存储多个数据，感兴趣的小伙伴们可以参考一下2016-07-04
- 下面小编就为大家带来一篇HTML5 本地存储 LocalStorage详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-24
- 在本地数据库中我们可以直接利用JavaScript创建数据库，并利用SQL语句执行相关的数据库操作。对于复杂的数据库，HTML5使用本地数据库进行操作,需要的朋友可以参考下2016-04-26
最新评论