html部分
<input type="file" name="" hidden id="upImg" value="" multiple>
<div id="show_img">
</div>
<label for="upImg">添加图片</label>
<button onclick="upFiles()">上传</button>
css部分
#show_img{
width: 100%;
height: 300px;
overflow: hidden;
padding-top: 30px;
display: none;
}
#show_img >div {
width: 150px;
height:150px;
border:1px solid black;
position: relative;
float: left;
margin-right: 10px;
margin-bottom: 30px;
}
#show_img img {
height:100%;
width: 100%;
}
#show_img > div > span{
display: inline-block;
width: 20px;
height:20px;
background-color: red;
position:absolute;
top: -10px;
right: -10px;
z-index: 99999;
line-height: 20px;
text-align: center;
border-radius: 50%;
color: white;
cursor: pointer;
}
label{
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
background: green;
color: white;
text-align: center;
cursor: pointer;
}
button{
background: red;
color: white;
width: 80px;
height: 30px;
border: none;
cursor: pointer;
}
js部分
/**
* by txw
* 原生js实现多图上传
* 本地预览 new FileReader()
* 获取动态创建标签利用事件委托解决
*/
var upImg = document.getElementById('upImg')
var show_img = document.getElementById('show_img')
var imgArr = [];//存储图片file;
var flag;//判断有一样的图片跳出循环
upImg.onchange = function(){
flag = true;
var files = upImg.files;
console.log(files)
for (let i = 0; i < files.length; i++) {
if(typeof FileReader === 'undefined'){
alert('您的浏览器不支持图片上传,请升级您的浏览器');
return false;
}
if(imgArr.length>0){
for (var j = 0; j < imgArr.length; j++) {
if(imgArr[j].name == files[i].name){
alert("已经存在相同的图片")
flag = false;
return false;
}
}
}
if(flag == false){x
return false;
}
var reader = new FileReader();
imgArr.push(files[i])
reader.readAsDataURL(files[i]);
reader.onload = function(e){
var div = document.createElement('div')
var img = document.createElement('img')
var span = document.createElement('span')
span.dataset.filename = imgArr[i].name
span.innerHTML ='x'
img.src = e.target.result;
div.appendChild(img);
div.appendChild(span);
show_img.appendChild(div);
show_img.style.display = "block";
};
};
upImg.value = '';//清空value值,因为如果下一次传的一样的onchange不会触发
}
//动态创建的标签使用事件委托找到标签
show_img.onclick = function(e){
var event = e || window.event
var target = event.target || event.srcElement;
if(target.nodeName.toLowerCase() == 'span'){
target.parentNode.remove();
for(var i = 0; i<imgArr.length;i++){
if(target.getAttribute('data-filename') == imgArr[i].name){
imgArr.splice(i,1)//删除数组中对应的img
}
}
}
}
//点击上传
function upFiles(){
console.log(imgArr)
}