HTML5 本地图片预览

问题

加入我们在 HTML 里面有一个图片上传控件:

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

注意这个 accept="image/*" 非常重要,它指定了上传的是图片,在移动端的时候会关联到系统的弹窗选择类型等问题,务必加上。

然后,问题是,我们在没有提交这个表单到服务器之前,有没有办法把图片的内容读取出来呢?

看似简单,都是客户端的文件,应该是可以的,但在之前确实没什么好办法,但是自从我们有了 HTML5

例子说明问题

$(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

后面再加一个小彩蛋,在寻找解决方案的途中发现的,但是感觉没啥用:

如下的方式生成链接可以在 ie6 中生效(但是后面因为安全性的原因已经被 K)

而且据说在 XP 下面的 ie8 也可以用。

<!DOCTYPE html>
<html>
  <head>
    <title>本地测试</title>
  </head>
  <body>
    <img src="file:///D:/upupw/htdocs/PANO_20150321_092653_o_0.jpg" />
  </body>
</html>

【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2015/03/html5-image-preview.html【HTML5 本地图片预览】

《HTML5 本地图片预览》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注