html5从一开始就给开发者带来了很多期待，提供了很多新的API。 不需要像以前那样为了实现某个功能而写很多代码了。 以前，如何实现图像的预览呢？ 出于安全原因，web端的js无法读取文件的本地实际路径。 只需将图像上传到服务器，然后获取图像的链接，就可以实现图像的预览。 另一方面，服务器例如有临时文件夹和正式文件夹两个文件夹，临时文件夹会定时被清理。 正式文件夹确认用户使用的图像的保存位置。
1. fileReader现在在html5提供的API中预览图像不再那么麻烦了。 FileReader提供了许多预览图像和读取灵活白猫的方法。 它还提供了完整的事件，用于捕获文件状态，如下所示：
FileReader接口的方法FileReader接口有四种方法，其中三种用于读取文件，另一种用于中断读取。 无论读取成功还是失败，方法都不返回读取结果。 结果存储在result属性中。
方法名称参数说明将readAsBinaryString file文件作为二进制代码读取根据格式将readAsText file[，encoding]文件作为容错白猫读取。 encode缺省为UTF-8 readAsDataURL file，用于将文件作为dataURLabort(none )终端读取的读取操作FileReader接口事件FileReader接口包括
事件说明onabort中断onerror错误onloadstart开始onprogress读取onload成功读取onloadend。 2 .使用filereader读取图像通过上表可以大致了解filereader提供的方法和事件，但本文主要讨论图像读取，但在做所有这些之前，当前的浏览器是html5文件读取请勿进行一系列处理和操作。 结果，如果没有定义fileReader，js报告了错误。 就像在亲吻和咬女孩子一样，马上就要拿着枪骑马了，那是温暖的月光。
if (！ (window.filereader window.file window.file list window.blob ) { show.innerHTML='您的浏览器不支持filereader ' upimg.setattribute(disabled )，disabled； 返回假； }
:'Hiragino Sans GB','Microsoft YaHei',微软雅黑,STHeiti,'WenQuanYi Micro Hei',SimSun,sans-serif; font-size:15px"> 好的，让我们先看下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 傲娇的书包 #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真是个好东西，还有着很多的东西等着我们去挖掘。“蹿腾吧，程序员”！