HTML5实现预览本地图片

百变鹏仔 2个月前 (10-18) #H5教程

文章标签图片

这篇文章主要介绍了html5实现预览本地图片的相关资料,需要的朋友可以参考下

问题描述
假设我们在 HTML 里面有一个图片上传控件：

复制代码

代码如下:

立即学习“前端免费学习笔记（深入）”；

<input id="upload_image" type="file" name="image" accept="image/*" />

注意这个 accept="image/*" 非常重要，它指定了上传的是图片，在移动端的时候会关联到系统的弹窗选择类型等问题，务必加上。
然后，问题是，我们在没有提交这个表单到服务器之前，有没有办法把图片的内容读取出来呢？
看似简单，都是客户端的文件，应该是可以的，但在之前确实没什么好办法，但是自从有了HTML5，这个功能又回来了，通过FileReader可以轻松的实现这个功能。
例子说明问题

复制代码

代码如下:

立即学习“前端免费学习笔记（深入）”；

$(function() { $(&#39;#upload_image&#39;).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(&#39;图片大小不能超过 2MB!&#39;); return false; } // !!!!!! // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL // 获取 window 的 URL 工具 var URL = window.URL || window.webkitURL; // 通过 file 生成目标 url var imgURL = URL.createObjectURL(file); // 用这个 URL 产生一个 <img  alt="HTML5实现预览本地图片" > 将其显示出来 $(&#39;body&#39;).append($(&#39;<img / alt="HTML5实现预览本地图片" >&#39;).attr(&#39;src&#39;, imgURL)); // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了 // URL.revokeObjectURL(imgURL); } }); });

简要说明
简单来说整个操作设计如下几步：
1.通过的 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

文章推荐

HTML5实现预览本地图片

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集