HTML5点击图片查看大图,科技常识：HTML5 实现图片预览和查看原图

我会带着你远行 2022-10-06 13:53 968阅读 0赞

今天小编跟大家讲解下有关HTML5 实现图片预览和查看原图 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5 实现图片预览和查看原图 的相关资料，希望小伙伴们看了有所帮助。

html5从一开始就给开发者很多的期待 提供众多新的API 不用再想以前一样 为了实现某个功能写很多的代码。在以前 如果要实现图片预览会怎么做呢 因为为了安全的原因 web端的js是不能读取文件的本地真实路径的 那么只能将图片上传到服务器上 然后再拿到图片的链接 这样才能实现图片预览。而服务器呢 比如有两个文件夹 一个是临时文件夹 一个是正式文件夹 临时文件夹会定时进行清理 正式文件夹是用户确认使用的图片存储的位置。

1. fileReader

现在html5提供的API不再让图片预览那么麻烦 FileReader提供了很多的方法来进行图片预览和文本读取 同时也提供了一整套完整的事件来捕获文件的状态 如下：

FileReader接口的方法FileReader接口有4个方法 其中3个用来读取文件 另一个用来中断读取。无论读取成功或失败 方法并不会返回读取结果 这一结果存储在result属性中。方法名参数描述readAsBinaryStringfile将文件读取为二进制编码readAsTextfile\[, encoding\]按照格式将文件读取为文本 encode默认为UTF-8readAsDataURLfile将文件读取为DataUrlabort(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 = ‘![img][]‘;

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 += ‘![img][]‘;

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

[img]: http://www.aidi.net.cn/article/detial/9220/%E2%80%98+e.target.result+%E2%80%98