HTML5实现预览本地图片.pdfVIP

这篇文章主要介绍了 HTML5 实现预览本地图片 的相关资料 ,需要的朋友可以参考下 问题描述 假设我们在 HTML 里面有一个图片上传控件： 代码如下 : lt;input id=upload_image type=file name=image accept=image/* /gt; 注意这个 accept=image/* 非常重要，它指定了上传的是图片，在移动端的时候会关 联到系统的弹窗选择类型等问题，务必加上。 然后， 问题是， 我们在没有提交这个表单到服务器之前， 有没有办法把图片的内容读取 出来呢？ 看似简单， 都是客户端的文件， 应该是可以的，但在之前确实没什么好办法， 但是自从 有了 HTML5 ，这个功能又回来了，通过 FileReader 可以轻松的实现这个功能。 例子说明问题 代码如下 : $(function() { $(#upload_image).change(function(event) { // 根据这个 lt;inputgt; 获取文件的 HTML5 js 对象 var files = event.target.files, file; if (files amp;amp; files.length gt; 0) { // 获取目前上传的文件 file = files[0]; // 来在控制台看看到底这个对象是什么 console.log(file); // 那么我们可以做一下诸如文件大小校验的动作 if(file.size gt; 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 产生一个 lt;imggt; 将其显示出来 $(body).append($(lt;img/gt;).attr(src, imgURL)); // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了 // URL.revokeObjectURL(imgURL); } }); }); 简要说明 简单来说整个操作设计如下几步： 1.通过 lt;filegt; 的 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.revokeObject