html5实现图片预览和查看原图

 html5提供了很多新的API，减轻了很多开发者的工作，比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能

html5 从一开始就给开发者很多的期待，提供众多新的 API，不用再想以前一样，为了实现某个功能写很多的代码。在以前，如果要实现图片预览会怎么做呢，因为为了安全的原因，web 端的 js 是不能读取文件的本地真实路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现图片预览。而服务器呢，比如有两个文件夹，一个是临时文件夹，一个是正式文件夹，临时文件夹会定时进行清理，正式文件夹是用户确认使用的图片存储的位置。

1. fileReader

现在 html5 提供的 API 不再让图片预览那么麻烦，FileReader 提供了很多的方法来进行图片预览和文本读取，同时也提供了一整套完整的事件来捕获文件的状态，如下：

FileReader 接口的方法 FileReader 接口有 4 个方法，其中 3 个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result 属性中。

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file[, encoding]	按照格式将文件读取为文本，encode默认为UTF-8
readAsDataURL	file	将文件读取为DataUrl
abort	(none)	终端读取操作

FileReader 接口事件 FileReader 接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

2. 使用 fileReader 读取图片

从上面的表格中，我们可以大致了解 fileReader 提供哪些方法和事件，不过本文主要是讲解图片的读取，那么我们就是用readAsDataURL()就可以了。不过，在进行这一切之前，我们必须检测当前的浏览器是否支持 html5 的 fileReader，别进行了一系列的处理和操作，结果 js 报错，说 fileReader 没有定义。就好像对一个女孩儿又亲又啃，马上要提枪上马了，结果发现这是个纯爷们。

if (!(window.FileReader && window.File && window.FileList && window.Blob)) {
    show.innerHTML = '您的浏览器不支持fileReader';
    upimg.setAttribute('disabled', 'disabled');
    return false;
}

2.1 读取单张图片

使用 input[type=file]控件读取文件，然后监听这个控件的 change 事件，若读取的文件个数大于零，那么就进行下一步的操作：

<input type="file" id="upimg" />

var upimg = document.querySelector('#upimg');
upimg.addEventListener('change', function (e) {
    var files = this.files;
    if (files.length) {
        // 对文件进行处理，下面会讲解checkFile()会做什么
        checkFile(this.files);
    }
});

现在我们只能选取一张图片，针对选取的这张图片，我们使用 fileReader 进行图片的处理

// 图片处理
function checkFile(files) {
    var file = files[0];
    var reader = new FileReader();
    // show表示<div id='show'></div>，用来展示图片预览的
    if (!/image\/\w+/.test(file.type)) {
        show.innerHTML = '请确保文件为图像类型';
        return false;
    }
    // onload是异步操作
    reader.onload = function (e) {
        show.innerHTML = '<img src="' + e.target.result + '" alt="img">';
    };
    reader.readAsDataURL(file);
}

现在，就可以在页面上看到图片了。审查元素后我们能够看到，图片地址是个 base64 的字符串，如：'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sA......'

2.2 读取多张图片

多张图片和单张图片的处理过程很相似，但是也还是有区别的，因为 reader.onload()是一个异步的操作，进行下一步的操作时必须在这个方法里

<input type="file" id="upimg" multiple />

// change事件没有改动
// 图片处理
function checkFile(files) {
    var html = '',
        i = 0;
    var func = function () {
        if (i >= files.length) {
            // 若已经读取完毕，则把html添加页面中
            show.innerHTML = html;
        }
        var file = files[i];
        var reader = new FileReader();

        // show表示<div id='show'></div>，用来展示图片预览的
        if (!/image\/\w+/.test(file.type)) {
            show.innerHTML = '请确保文件为图像类型';
            return false;
        }
        reader.onload = function (e) {
            html += '<img src="' + e.target.result + '" alt="img">';
            i++;
            func(); //选取下一张图片
        };
        reader.readAsDataURL(file);
    };
    func();
}

2.3 拖拽拉取图片

拖拽事件，采用的是 html5 中的 drag 和 drop，本文不着重介绍这两个方法，仅仅是讲解如何使用。

首先，我们设置一块拖拽区域，告诉用户应该把图片拖拽到什么位置：

<style>
    .drag{ width: 400px;height: 100px;border: 1px dotted #333; text-align: center; line-height: 100px; color: #aaa; display: inline-block;}
    .drag_hover{background: #FAD6F9;}
</style>

<span class="drag" id="drag">拖拽区域</span>

然后，我们给 drag 区域绑定上拖拽事件

var drag = document.getElementById('drag');
drag.addEventListener(
    'dragenter',
    function (e) {
        // 拖拽鼠标进入区域时
        this.className = 'drag_hover';
    },
    false
);
drag.addEventListener(
    'dragleave',
    function (e) {
        // 拖拽鼠标离开区域时
        this.className = '';
    },
    false
);
drag.addEventListener(
    'drop',
    function (e) {
        // 当鼠标执行‘放’的动作时，执行读取文件操作
        var files = e.dataTransfer.files;
        this.className = '';
        if (files.length != 0) {
            checkFile(files);
        }
        e.preventDefault();
    },
    false
);
drag.addEventListener(
    'dragover',
    function (e) {
        // 当对象拖动到目标对象时触发
        e.dataTransfer.dragEffect = 'copy';
        e.preventDefault();
    },
    false
);

这里有个需要注意的地方：需要给 dragover 和 drop 添加阻止默认事件，否则浏览器会采用file:///的方式打开文件。drop 事件执行后就是进行 checkFile()，后续的操作与使用 input[type=file]的操作一样。

3. 点击查看原图

当我们点击图片查看原图时，需要知道图片的原始尺寸。可能你会想到使用 img.width 和 img.height，对，这个确实能获取到图片的长和宽，但是，这个长和宽是经过 css 修饰后的，不是图片原始的尺寸。如果要获取图片的原始尺寸，我们可以在 js 中创建一个 Image 对象，然后把那张图片的地址给了这个 Image 对象，然后获取 Image 对象的尺寸，这样就能获取到图片的原始尺寸了。

var img = new Image();
img.src = img.src; // 给新的img对象链接
console.log(img.width, img.height);

而在 html5 中，我们不用再那么麻烦的创建一个无用的 img 对象了，直接使用给出的属性即可。

console.log(img.naturalWidth); // 获取图片的原始的宽度
console.log(img.naturalHeight); // 获取图片的原始的高度

获取到图片的原始尺寸后，就能做出‘查看原图’的效果了。

4. 总结

html5 真是个好东西，还有着很多的东西等着我们去挖掘。“蹿腾吧，程序员”！

作者: 蚊子前端博客

链接:HTML5 实现图片预览和查看原图 - SegmentFault 思否