多图片上传预览的实现

比眉伴天荒 2021-11-17 06:06 649阅读 0赞

### 闲话日常： ###

有时候在项目中，可能会用到图片上传的预览功能，而之前总是在网上找相关的插件进行实现，但是有的时候发现别人写好的插件，有时候会影响到自身布局的样式，偶尔还很难进行控制，索性去了解了一下FileReader，后来发现其实实现一个图片预览的功能不过二三十行代码的事，今天分享一下我的写法。

### 整体思路： ###

整体思路大概是下面这样的（基于JQ）：

1、页面整体布局，只需要一个添加的按钮，一个装载input\[type=file\]的div，一个装载所有图片的div，而一开始的时候，都是空的，后续进行添加。

2、点击按钮的时候，为页面添加一个input\[type=file\]的元素，同时通过js实现点击，选择文件。

3、当这个元素发生改变时，即触发change的时候，获取到里边的元素，同时new一个FileReader对象，为FileReader修改它的onload事件。

4、onload事件为为装载所有图片的div追加一个元素img，在为img清空事件的同时，追加一个点击图片，删除对应的input\[type=file\]和自身的函数

5、最后调用FileReader对象的readAsDataURL方法，将文件传进去即可。

### 代码实现： ###

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js" type="text/javascript" charset="utf-8"></script>
    	<title>多图片上传多图预览</title>
    	<style>
    		.addBtn{
    			width: 50px;
    			height: 50px;
    			border: solid 3px black;
    			text-align: center;
    			line-height: 40px;
    			font-size: 50px;
    		}
    		.allIpt{
    			display: none;
    		}
    		.allImg img{
    			width: 100px;
    			height: 100px;
    			margin: 5px;
    		}
    	</style>
    </head>
    <body>
    	<div class="addBtn">+</div>
    	<div class="allIpt"></div>
    	<div class="allImg"></div>
    </body>
    	<script type="text/javascript">
    		//定义所有获取节点
    		var addBtn = $('.addBtn');
    		var allImg = $('.allImg');
    		var allIpt = $('.allIpt');
    		var NUMBER = 0;
    		//追加元素
    		addBtn.click(function(){
    			var addIpt = "<input type='file' name='file' class='file' />";
    			allIpt.append(addIpt);
    			$('[type=file]').eq(NUMBER).click();
    			document.getElementsByClassName('file')[NUMBER].onchange=function(){
    				var FILE = this.files[0];
    				var reader = new FileReader();
    				reader.onload = function (e) {
    					var IMG = "<img src='"+e.target.result+"' />";
    					allImg.append(IMG);
    					$("img").unbind();
    					$("img").click(function(){
    						let INDEX = $(this).index();
    						$("input").eq(INDEX)[0].remove();
    						$(this).remove();
    						NUMBER--;
    					})
    				}
    				reader.readAsDataURL(FILE);
    			}
    			NUMBER++;
    		})
    	</script>
    </html>