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

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;
}

好的，让咱们先看下demo演示：【狠狠点击这里】

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中建立一个imgs对象，而后把那张图片的地址给了这个imgs对象，而后获取imgs对象的尺寸，这样就能获取到图片的原始尺寸了。

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

而在HTML5中，咱们不用再那么麻烦的建立一个无用的img对象了，直接使用给出的属性便可。

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

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

4. 总结

HTML5 真是个好东西，还有着不少的东西等着咱们去挖掘。“蹿腾吧，程序员”！