用HTML5 实现图片预览和查看原图的功能

FileReader接口事件

FileReader接口捕获读取文件时的状态对应的事件模型如下。

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

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没有被定义。

1. if(!(window.FileReader && window.File && window.FileList && window.Blob)){
2. show.innerHTML = ‘浏览器不支持fileReader‘;
3. upimg.setAttribute(‘disabled‘, ‘disabled‘);
4. return false;
5. }

好的，让我们先看下demo：【

点击这里

】

2.1 fileReader读取单张图片

用input[type=file]控件读取文件，然后监听这个控件的change事件，若文件个数大于零，那么就进行下一步的操作：

1. <input type="file" id=‘upimg‘ />
2. var upimg = document.querySelector(‘#upimg‘);
3. upimg.addEventListener(‘change‘, function(e){
4. var files = this.files;
5. if(files.length){
6. // 对文件进行处理，下面会讲解checkFile()会做什么
7. checkFile(this.files);
8. }
9. });

现在我们选取一张图片，针对选取的这张图片，我们使用fileReader进行图片的处理

1. // 图片处理
2. function checkFile(files){
3. var file = files[0];
4. var reader = new FileReader();
5. // show表示<div id=‘show‘></div>，展示图片预览
6. if(!/image\/\w+/.test(file.type)){
7. show.innerHTML = "请确保文件为图像类型";
8. return false;
9. }
10. // onload异步操作
11. reader.onload = function(e){
12. show.innerHTML = ‘<img src="‘+e.target.result+‘" alt="img">‘;
13. }
14. reader.readAsDataURL(file);
15. }

现在，就可以在页面上看到图片了。

2.2 fileReader读取多张图片

和单张图片的处理过程很相似，但是也还是有区别的，因为reader.onload()是一个异步的操作，进行下一步的操作时必须在这个方法里,代码如下:

1. <input type="file" id=‘upimg‘ multiple />
2. // change事件没有改动
3. // 图片处理
4. function checkFile(files){
5. var html=‘‘, i=0;
6. var func = function(){
7. if(i>=files.length){
8. // 若已经读取完毕，则把html添加页面中
9. show.innerHTML = html;
10. }
11. var file = files[i];
12. var reader = new FileReader();
13.  
14. // show表示<div id=‘show‘></div>，用来展示图片预览的
15. if(!/image\/\w+/.test(file.type)){
16. show.innerHTML = "请确保文件为图像类型";
17. return false;
18. }
19. reader.onload = function(e){
20. html += ‘<img src="‘+e.target.result+‘" alt="img">‘;
21. i++;
22. func(); //选取下一张图片
23. }
24. reader.readAsDataURL(file);
25. }
26. func();
27. }

2.3 拖拽拉去图片

拖拽事件，采用的是HTML5中的drag和drop，本文不着重介绍这两个方法，仅仅是讲解如何使用。

首先，我们设置一块拖拽区域，告诉用户应该把图片拖拽到什么位置：

1. <style>
2. .drag{ width: 400px;height: 100px;border: 1px dotted #333; text-align: center; line-height: 100px; color: #aaa; display: inline-block;}
3. .drag_hover{background: #FAD6F9;}
4. </style>
5. <span class=‘drag‘ id="drag">拖拽区域</span>

然后，我们给drag区域绑定上拖拽事件

1. var drag = document.getElementById(‘drag‘);
2. drag.addEventListener(‘dragenter‘, function(e){
3. // 拖拽鼠标进入区域时
4. this.className = ‘drag_hover‘;
5. }, false);
6. drag.addEventListener(‘dragleave‘, function(e){
7. // 拖拽鼠标离开区域时
8. this.className = ‘‘;
9. }, false);
10. drag.addEventListener(‘drop‘, function(e){
11. // 当鼠标执行‘放’的动作时，执行读取文件操作
12. var files = e.dataTransfer.files;
13. this.className = ‘‘;
14. if (files.length != 0) {
15. checkFile(files);
16. };
17. e.preventDefault();
18. }, false)
19. drag.addEventListener(‘dragover‘, function(e){
20. // 当对象拖动到目标对象触发
21. e.dataTransfer.dragEffect = ‘copy‘;
22. e.preventDefault();
23. }, false);

这里需要注意：

需要给dragover和drop添加阻止默认事件，否则浏览器会采用file:///的方式打开文件

。drop事件执行后就是进行checkFile()，后续的操作与使用input[type=file]的操作一样。

 

3. 点击查看原图

当我们点击图片查看原图时，需要知道图片的原始尺寸。可能你会想到使用img.width和img.height，对，这个确实能获取到图片的长和宽，但是，这个长和宽是经过css修饰后的，不是图片原始的尺寸。如果要获取图片的原始尺寸，我们可以在js中创建一个imgs对象，然后把那张图片的地址给了这个imgs对象，然后获取imgs对象的尺寸，这样就能获取到图片的原始尺寸了。

1. var imgs = new Image();
2. imgs.src = img.src; // 给新的img对象链接
3. console.log(imgs.width, imgs.height);

而在HTML5中，我们不用再那么麻烦的创建一个无用的img对象了，直接使用给出的属性即可。

1. console.log(img.naturalWidth); // 获取图片的原始的宽度
2. console.log(img.naturalHeight); // 获取图片的原始的高度

获取到图片的原始尺寸后，就能做出‘查看原图’的效果了。

原文链接:

https://www.cps12345.com/css-html/750/