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演示:【狠狠点击这里】
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 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 = 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 真是个好东西,还有着很多的东西等着我们去挖掘。“蹿腾吧,程序员”!
HTML5 实现图片预览和查看原图相关推荐
- html图片查看代码实现,如何用HTML5实现图片预览和查看原图的功能
html5实现图片预览和查看原图 html5实现图片预览和查看原图相对以前容易多了,在以前,为了安全,web端的js是不能读取文件的本地真实路径的,只能将图片上传到服务器上,再取图片的链接,这样才能实 ...
- html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
- HTML5点击图片查看大图,科技常识:HTML5 实现图片预览和查看原图
今天小编跟大家讲解下有关HTML5 实现图片预览和查看原图 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 实现图片预览和查看原图 的相关资料,希望小伙伴们看了有所帮助. htm ...
- html5 预览图片原理,html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
- html5 查看图片,html5实现图片预览和查看原图
一.页面元素只有三个简单元素: 拖拽区域 二.添加简单的样式: .dragarea{ width:300px; height:100px; background:#ddd; text-align:ce ...
- html 图片点击查看,Html点击实现图片预览和查看原图
最近博客有个需求,需要在文章页面,点击文章内的图片放大,再次点击缩小.写完之后特别分享一下. 源代码: ```` content="width=device-width,initial-sc ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
- flutter图片预览_flutter好用的轮子推荐四-可定制的图片预览查看器photo
前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!F ...
最新文章
- 张一鸣的微博世界-产品篇二
- PR详解及二分类的PR曲线绘制
- 苹果、微软等巨头107道机器学习面试题
- 两个线程并发执行以下代码,假设a是全局变量,初始为1,那么以下输出______是可能的?
- hexo的yelee主题更换类别以及tags的字体颜色
- 常见RPM,YUM,DNF指令
- 第 4 章 MySQL 锁机制
- 静态编译和动态编译的区别【转】
- 牡丹-曹州牡丹:曹州牡丹
- 中级软考-软件设计师(一)
- 手把手教你齿轮齿条配合
- windwos上外网
- Relion在K1 Power Linux实践
- c#窗体程序生成错误_创建一个没有窗口的程序 (C#) | 学步园
- 杭电OJ 1026(C++)
- 关于echarts如何在折现图上展示异常点位
- 女生学计算机专业毕业,女生学计算机专业好吗 毕业之后好找工作吗
- EMA计算(pandas之emw函数使用及设置)
- 虎书学习笔记6:图形学基础数学(重心坐标系、三维三角形)
- 智慧养老智能化解决方案-智能床垫-智慧养老解决方案
热门文章
- 贪婪算法在求解最小生成树中的应用(JAVA)--Kruskal算法
- 通达oa wbupload.php,关于通达OA上传附件类型限制的设置
- httpsurlconnection 写不进去authorization值_23. 假设检验的时候为什么常写p lt; 0.05,而不写具体的p值?...
- 带负荷测试要求二次最小电流_开关柜设计人员如何选择合适的零序电流互感器?...
- lrange是取出所有值并移除么_图解双指针 | LeetCode 27. 移除元素
- RPC和REST区别
- 手把手教你做数据产品经理
- 什么时候觉得自己该离职了?
- 计算机网络课程实训方法,《计算机网络基本原理》实践环节指导一
- python requests 代理ip_python requests 测试代理ip