今天，小编就给大家介绍一下HTML5实现图像的预览和原图的浏览。 我相信伙伴们会关注这个话题吧。 编辑也收集了关于HTML5实现图像的预览和原图的浏览的资料。 希望伙伴们看了会有帮助。
html5从一开始就为开发人员提供了很多新的API，不再需要像以前那样写很多代码来实现某种功能。 以前如何实现图像预览呢？ 由于安全原因，web端的js无法读取文件的本地真实路径，所以只能将图像上传到服务器，然后获得图像的链接。 服务器例如有两个文件夹。 一个是临时文件夹，另一个是正式文件夹的临时文件夹。 定时进行正式文件夹的整理。 正式文件夹确认用户使用的图像的保存位置。
1 .文件读取器
现在，html5提供的API不再让图像预览变得那么麻烦了。 FileReader为预览图像和仔细读取冥王星提供了许多方法，同时还提供了完整的事件来捕获文件状态。
FileReader接口的方法FileReader接口有四种方法，其中三种用于读取文件，另一种用于中断读取。 无论读取成功还是失败，读取结果都存储在result属性中。 方法名称参数说明将readAsBinaryStringfile文件作为二进制代码读取readAsTextfile[，encoding]文件的格式不严格冥王星encode缺省为utf-8 readastextfile
FileReader接口事件FileReader接口包含用于捕获读取文件状态的完整事件模型。 事件说明onabort中断onerror错误onloadstart开始onprogress读取中onload读取成功onloadend读取完成。 使用fileReader导入图像
从上表可以大致了解fileReader提供了哪些方法和事件，但本文主要介绍图像读取。 那么，使用readAsDataURL ()。 但是，在执行所有这些操作之前，必须检查当前浏览器是否支持html5文件管理器。 经过一系列处理和操作，js报告没有定义fileReader。 就像亲吻女孩，咬了她一口，马上拿着枪准备骑马，结果发现这是lkdxlb。 if (！ (window.filereader window.file window.file list window.blob ) {
show.innerhtml=‘“您的浏览器不支持fileReader‘”；
up img.set attribute (‘disabled’，‘disabled’)；
返回假；
}
好的，我们先看看demo演示。 【请单击此处】2 .导入一张照片
使用input[type=file]控件读取文件并接收该控件的change事件。 如果读取的文件数大于零，请转至下一步。
varupimg=document.query selector (# up img )；
up img.addevent listener (‘change’，function(e ) )
var files=this.files；
if(files.Length ) {
//处理文件的checkFile ) )说明要做什么
检查文件(this.files )；
}
)；
现在只能选择一张图像。 使用fileReader对选择的该图像进行图像处理//图像处理
函数检查文件(files ) {
var file=files[0]；
var reader=new FileReader (；
//show是
if (！ /image/w/.test(file.type ) }{
show.innerhtml='请确保文件是图像类型'；
返回假；
}
//onload是异步操作
reader.onload=function(e ) {
show.innerhtml=‘‘；
}
reader.readasdataurl(file；
}
这样就可以在页面上显示图像。 查看元素后，您将看到“‘data:image/jpeg； base64、/9j/4 qayrxhpzgaasukqaagaaaaaaaaaaap . 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 踏实的电灯胆 #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中创建一个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 真是个好东西 还有着很多的东西等着我们去挖掘。“蹿腾吧 程序员”！