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

html5从一开始就给开发者很多的期待，提供众多新的API，不用再想以前一样，为了实现某个功能写很多的代码。在以前，如果要实现图片预览会怎么做呢，因为为了安全的原因，web端的js是不能读取文件的本地真实路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现图片预览。

而服务器呢，比如有两个文件夹，一个是临时文件夹，一个是正式文件夹，临时文件夹会定时进行清理，正式文件夹是用户确认使用的图片存储的位置。

1. fileReader现在HTML5提供的API不再让图片预览那么麻烦，FileReader提供了很多的方法来进行图片预览和文本读取，同时也提供了一整套完整的事件来捕获文件的状态，如下：FileReader接口的方法 FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。2. 使用 fileReader 读取图片从上面的表格中，我们可以大致了解fileReader提供哪些方法和事件，不过本文主要是讲解图片的读取，那么我们就是用readAsDataURL就可以了。

不过，在进行这一切之前，我们必须检测当前的浏览器是否支持HTML5的fileReader，别进行了一系列的处理和操作，结果js报错，说fileReader没有定义。

就好像对一个女孩儿又亲又啃，马上要提枪上马了，结果发现这是个纯爷们。if){show.innerHTML = ‘您的浏览器不支持fileReader‘;upimg.setAttribute;return false;}2.1 读取单张图片使用input[type=file]控件读取文件，然后监听这个控件的change事件，若读取的文件个数大于零，那么就进行下一步的操作：var upimg = document.querySelector;upimg.addEventListener{var files = this.files;if{ // 对文件进行处理，下面会讲解checkFile会做什么 checkFile;}});现在我们只能选取一张图片，针对选取的这张图片，我们使用fileReader进行图片的处理// 图片处理function checkFile{var file = files[0];var reader = new FileReader;// show表示，用来展示图片预览的if){ show.innerHTML = "请确保文件为图像类型"; return false;}// onload是异步操作reader.onload = function{ show.innerHTML = ‘‘;}reader.readAsDataURL;}现在，就可以在页面上看到图片了。审查元素后我们能够看到，图片地址是个base64的字符串，2.2 读取多张图片多张图片和单张图片的处理过程很相似，但是也还是有区别的，因为reader.onload是一个异步的操作，进行下一步的操作时必须在这个方法里// change事件没有改动// 图片处理function checkFile{var html=‘‘, i=0;var func = function{ if{ // 若已经读取完毕，则把html添加页面中 show.innerHTML = html; } var file = files[i]; var reader = new FileReader; // show表示，用来展示图片预览的 if){ show.innerHTML = "请确保文件为图像类型"; return false; } reader.onload = function{ html += ‘‘; i++; func; //选取下一张图片 } reader.readAsDataURL;}func;}2.3 拖拽拉去图片拖拽事件，采用的是HTML5中的drag和drop，本文不着重介绍这两个方法，仅仅是讲解如何使用。

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

拖拽区域

然后，我们给drag区域绑定上拖拽事件var drag = document.getElementById;drag.addEventListener{// 拖拽鼠标进入区域时this.className = ‘drag_hover‘;}, false);drag.addEventListener{// 拖拽鼠标离开区域时this.className = ‘‘;}, false);drag.addEventListener{// 当鼠标执行‘放’的动作时，执行读取文件操作var files = e.dataTransfer.files;this.className = ‘‘;if { checkFile;};e.preventDefault;}, false)drag.addEventListener{// 当对象拖动到目标对象时触发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;而在HTML5中，我们不用再那么麻烦的创建一个无用的img对象了，直接使用给出的属性即可。

console.log; // 获取图片的原始的宽度console.log; // 获取图片的原始的高度获取到图片的原始尺寸后，就能做出‘查看原图’的效果了。4. 总结HTML5 真是个好东西，还有着很多的东西等着我们去挖掘。从最零基础开始的的HTML+CSS+Javascript。