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;

}

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

2.1 读取单张图片

使用 input[type=file]控件读取文件，然后监听这个控件的 change 事件，若读取的文件个数大于零，那么就进行下一步的操作：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表示

if (!/image\/\w+/.test(file.type)) {

show.innerHTML = '请确保文件为图像类型';

return false;

}

// onload是异步操作

reader.onload = function (e) {

show.innerHTML = '';

};

reader.readAsDataURL(file);

}

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

2.2 读取多张图片

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

if (!/image\/\w+/.test(file.type)) {

show.innerHTML = '请确保文件为图像类型';

return false;

}

reader.onload = function (e) {

html += '';

i++;

func(); //选取下一张图片

};

reader.readAsDataURL(file);

};

func();

}

2.3 拖拽拉取图片

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

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

.drag{ width: 400px;height: 100px;border: 1px dotted #333; text-align: center; line-height: 100px; color: #aaa; display: inline-block;}

.drag_hover{background: #FAD6F9;}

拖拽区域

然后，我们给 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 真是个好东西，还有着很多的东西等着我们去挖掘。“蹿腾吧，程序员”！