jquery上传图片，限制4张，回显删除多图上传，限制格式大小

1.效果


2.HTML

<div class="upload-content">
		<div class="content-img">
			<ul class="content-img-list"></ul>
			<div class="file">
				+
				<input type="file" name="file" accept="image/*" id="upload" multiple>
			</div>
		</div>
	</div>

3.CSS

.upload-content .content-img-list {
       display: inline-block;
       padding: 0;
	   margin: 0;
   }
   .upload-content .content-img-list-item {
       position: relative;
       display: inline-block;
       width: 80px;
       height: 80px;
       margin: 7px;
       border: 1px solid #DEDEDE;
       border-radius: 4px;
       background-color: #fff;
       vertical-align: middle;
       line-height: 80px;
   }  
   .upload-content .content-img-list-item .hide {
	   width: 20px;
	   height: 20px;
	   line-height: 20px;
	   text-align: center;
	   background-color: #ccc;
	   position: absolute;
	   right: -10px;
	   top: -10px;
	   cursor: pointer;
	   border-radius: 50%;
   }  
   .upload-content .content-img-list-item img {
       width: 100%;
	   height: 100%;
	   vertical-align: top;
   }
   .upload-content .file {
       position: relative;
       display: inline-block;
       border: 1px solid #DEDEDE;
       border-radius: 4px;
       width: 80px;
       height: 80px;
       line-height: 80px;
       text-align: center;
       background-color: #fff;
       vertical-align: top;
       margin: 7px;
	   font-size: 40px;
	   color: #ccc;
   }
   .upload-content .file input {
       position: absolute;
       right: 0;
       top: 0;
       opacity: 0;
       cursor: pointer;
       width: 80px;
       height: 80px;
   }

4.JS

$(function() {
	var imgFile = []; //文件流
	var imgSrc = []; //图片路径
	var imgName = []; //图片名字
    // 图片删除
    $(".content-img-list").on("click", '.hide', function() {
        var index = $(this).parent().index();
        imgSrc.splice(index, 1);
        imgFile.splice(index, 1);
        imgName.splice(index, 1);
        var boxId = ".content-img-list";
        addNewContent(boxId);
        if (imgFile.length < 4) { //显示上传按钮
            $('.content-img .file').show();
        }
    });
	//图片上传
	$('#upload').on('change', function(e) {
		var imgSize = this.files[0].size;
		if (imgSize > 1024 * 500 * 1) { //1M
			return alert("上传图片不能超过500KB");
		};
		if (this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif') {
			return alert("图片上传格式不正确");
		}
		var imgBox = '.content-img-list';
		var fileList = this.files;
		for (var i = 0; i < fileList.length; i++) {
			if(imgSrc.length < 4) {  //判断多图上传只显示前几个，直到一共四个图片
				var imgSrcI = getObjectURL(fileList[i]);
				imgName.push(fileList[i].name);
				imgSrc.push(imgSrcI);
				imgFile.push(fileList[i]);
				if (imgFile.length > 3) { //显示上传按钮
					$('.content-img .file').hide();
				}
			}else {
				console.log("超出4张")
			}
		}
		addNewContent(imgBox);
		this.value = null; //允许上传相同图片
	});
	//图片展示
	function addNewContent(obj) {
		$(obj).html("");
		for (var a = 0; a < imgSrc.length; a++) {
			var oldBox = $(obj).html();
			$(obj).html(oldBox + '<li class="content-img-list-item"><img src="' + imgSrc[a] + '" alt="">' +
				'<div class="hide">X' +'</div></li>');
		}
	}
	//建立可存取到file的url
	function getObjectURL(file) {
		var url = null;
		if (window.createObjectURL != undefined) { // basic
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file);
		}
		return url;
	}
	
});