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演⽰：【狠狠点击这⾥】
如何查看html代码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+/.pe)){
show.innerHTML = "请确保⽂件为图像类型";
return false;
}
// onload是异步操作
show.innerHTML = ‘<img src="‘+sult+‘" alt="img">‘;
}
}
现在，就可以在页⾯上看到图⽚了。审查元素后我们能够看到，图⽚地址是个base64的字符串，
如：‘data:image/jpeg;base64,/9j/‘
2.2 读取多张图⽚
多张图⽚和单张图⽚的处理过程很相似，但是也还是有区别的，因为load()是⼀个异步的操作，进⾏下⼀步的操作时必须在这个⽅法⾥
<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+/.pe)){
show.innerHTML = "请确保⽂件为图像类型";
return false;
}
html += ‘<img src="‘+sult+‘" alt="img">‘;
i++;
func(); //选取下⼀张图⽚
}
}
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 = ElementById(‘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); // 获取图⽚的原始的⾼度
获取到图⽚的原始尺⼨后，就能做出‘查看原图’的效果了。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论