多图片上传预览的实现

最新推荐文章于 2019-11-15 15:19:51 发布

ღ故里᭄ꦿ࿐

最新推荐文章于 2019-11-15 15:19:51 发布

阅读量409

点赞数 5

分类专栏：功能实现文章标签：图片预览图片上传

本文链接：https://blog.csdn.net/Hunt_bo/article/details/97751308

版权

功能实现专栏收录该内容

21 篇文章 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>