原生js实现多图上传并且能本地预览

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)
		}