HTML5实现预览本地图片
上传照片前先看看效果！下面教你使用HTML5 FileReader小工具实现快速便捷的上传图片功能。
HTML中的图片上传控件
Wow，HTML里的input标签怪强大，居然还可以拿来当上传文件的框！仅仅设置一下type=”file”属性，就让你瞬间变身大力水手（超人）。再配上个accept属性，写成”image/*”,就能让用户只能上传图片。别以为这个小功能无足轻重，其实它是确保文件准确上传的神器，尤其在手机端还有贴心的系统提醒。
FileReader对象的作用
从前，得先等您把图片看全了再能传上去，怪麻烦哩！但是有了HTML5的FileReader对象就不一样，可以直接在电脑上预览，还能做点小操作呢
实现预览本地图片的步骤
就用input的change事儿，再加上一个叫event的伴随事件。
2.从event对象中获取上传的文件的js对象file；
简言之，就用这个window.URL，能轻轻松松把file对象转换成看起来挺直观易懂的URL！
把这个URL填到img标签的src属性里，就能看到预览了。
$(function() {
$('#upload_image').change(function(event) {
// 根据这个 获取文件的 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 产生一个 将其显示出来
$('body').append($('').attr('src', imgURL));
// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
// URL.revokeObjectURL(imgURL);
}
});
});
5.在不需要时释放这个URL。
关键点详解
记住！咱用那个叫 URL.createObjectURL 的小功能就能创建最新鲜的网址，不怕弄错。
一旦你把这个`URL.createObjectURL`给输进去，浏览器就会自动开始将链接内容处理好。
给你说个小趣事儿！当你用那个URL.revokeObjectURL(imgURL)删了图片链接后，再去点开，可能就是”404″的空页面！
看好，这个在自家电脑上完成就行了，没人知道你选了啥图片。
这imgURL，长这样子：http://localhost:8000/blabla/72bb。
总结与展望
快来试试这个吧～教你如何利用HTML5来查看电脑里的图片！太方便了，再也不用辛苦找到电脑里的文件！编程也能轻松搞定。而且现在互联网技术那么强大，肯定还有更多好玩儿的技巧等着我们发掘！
评论0