闲话日常:
有时候在项目中,可能会用到图片上传的预览功能,而之前总是在网上找相关的插件进行实现,但是有的时候发现别人写好的插件,有时候会影响到自身布局的样式,偶尔还很难进行控制,索性去了解了一下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>