上传图片（最多可以上传5张图片）demo效果示例（整理）

知秋~
已于 2022-06-14 11:07:45 修改
阅读量5.6k
点赞数 1
文章标签：上传图片上传5张删除
于 2018-11-09 15:00:32 首次发布
本文链接：https://blog.csdn.net/qq_38881495/article/details/83897888
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传图片（最多可以上传5张图片）</title>
<style>
* {margin:0;padding:0;}
.up-section .type-upimg {display:none;}
::-ms-clear,::-ms-reveal {display:none;}
textarea {outline:none;line-height:14px;padding-left:4px;padding-top:4px;border:1px solid #ccc;color:#444;font-size:14px;outline:none;text-align:left;}
.overflow {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
button {outline:none;border:0px;}
input {outline:none;}
a {outline:none;}
a,button {cursor:pointer;}
body {background:#f4f4f4;font-size:14px;}
.clear {clear:both;}
.full {width:1210px;min-width:1210px;margin:0 auto;}
.full-big {width:1340px;min-width:1340px;margin:0 auto;}
.img-full {display:block;width:100%;}
::-webkit-input-placeholder {color:#777;font-size:14px;}
:-moz-placeholder {/* Firefox 18- */color:#777;font-size:14px;}
::-moz-placeholder {/* Firefox 19+ */color:#777;font-size:14px;}
:-ms-input-placeholder {color:#777;font-size:14px;}
/* ====clear float====== *//*nav a:visited {color:rgb(65,65,65);}
aside a:visited {color:rgb(65,65,65);}
*/.fl {float:left;}
.fr {float:right;}
.clear:after {content:'';display:block;clear:both;}
/* reset */.pic img {display:none;}
em {font-style:normal}
li {list-style:none}
a {text-decoration:none;}
img {border:none;}
table {border-collapse:collapse;}
/*上传图片插件的样式*/.img-box {margin-top:40px;}
.img-box .up-p {margin-bottom:20px;font-size:16px;color:#555;}
.z_photo {padding:18px;border:2px dashed #E7E6E6;}
.z_photo .z_file {position:relative;}
.z_file  .file {width:100%;height:100%;opacity:0;position:absolute;top:0px;left:0px;z-index:100;}
.z_photo .up-section {position:relative;margin-right:20px;margin-bottom:20px;}
.up-section .close-upimg {position:absolute;top:6px;right:8px;display:none;z-index:10;}
.up-section .up-span {display:block;width:100%;height:100%;visibility:hidden;position:absolute;top:0px;left:0px;z-index:9;background:rgba(0,0,0,.5);}
.up-section:hover {border:2px solid #f15134;}
.up-section:hover .close-upimg {display:block;}
.up-section:hover .up-span {visibility:visible;}
.z_photo .up-img {display:block;width:100%;height:100%;}
.loading {border:1px solid #D1D1D1;background:url(https://cs.m.xczhihui.com/xcview/images/shop/loading.gif) no-repeat center;}
.up-opcity {opacity:0;}
.img-name-p {display:none;}
.upimg-div .up-section {width:190px;height:180px;}
.img-box .upimg-div .z_file {width:190px;height:180px;}
.z_file .add-img {display:block;width:190px;height:180px;}
/*遮罩层样式*/.mask {z-index:1000;display:none;position:fixed;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,.4);}
.mask .mask-content {width:500px;position:absolute;top:50%;left:50%;margin-left:-250px;margin-top:-80px;background:white;height:160px;text-align:center;}
.mask .mask-content .del-p {color:#555;height:94px;line-height:94px;font-size:18px;border-bottom:1px solid #D1D1D1;}
.mask-content .check-p {height:66px;line-height:66px;position:absolute;bottom:0px;left:0px;width:100%;}
.mask-content .check-p span {width:49%;display:inline-block;text-align:center;color:#d4361d;font-size:18px;}
.check-p .del-com {border-right:1px solid #D1D1D1;}
</style>
</head>
<body>
<div class="img-box full">
	<section class=" img-section">
		<p class="up-p"><span class="up-span">上传图片（最多可以上传5张图片）</span></p>
		<div class="z_photo upimg-div clear">
			<section class="z_file fl">
				<img src="https://cs.m.xczhihui.com/xcview/images/shop/uploading.png" class="add-img">
				<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple="">
			</section>
		</div>
	 </section>
</div>
<aside class="mask works-mask">
	<div class="mask-content">
		<p class="del-p ">您确定要删除图片吗？</p>
		<p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
	</div>
</aside>
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
	
	$(function(){
		var delParent;
		var defaults = {
			fileType: ["jpg","png","bmp","jpeg"],   // 上传文件的类型
			fileSize: 1024 * 1024 * 1                  // 上传文件的大小 10M
		};
			/*点击图片的文本框*/
		$(".file").change(function(){	 
			var idFile = $(this).attr("id");
			var file = document.getElementById(idFile);
			var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
			var fileList = file.files; //获取的图片文件
			var input = $(this).parent();//文本框的父亲元素
			var imgArr = [];
			//遍历得到的图片文件
			var numUp = imgContainer.find(".up-section").length;
			var totalNum = numUp + fileList.length;  //总的数量
			if(fileList.length > 5 || totalNum > 5 ){
				alert("上传图片数目不可以超过5个，请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
			}
			else if(numUp < 5){
				fileList = validateUp(fileList);
				for(var i = 0;i<fileList.length;i++){
				 var imgUrl = window.URL.createObjectURL(fileList[i]);
				     imgArr.push(imgUrl);
				 var $section = $("<section class='up-section fl loading'>");
				     imgContainer.prepend($section);
				 var $span = $("<span class='up-span'>");
				     $span.appendTo($section);
				
			     var $img0 = $("<img class='close-upimg'>").on("click",function(event){
					    event.preventDefault();
						event.stopPropagation();
						$(".works-mask").show();
						delParent = $(this).parent();
					});   
					$img0.attr("src","https://cs.m.xczhihui.com/xcview/images/shop/close.png").appendTo($section);
			     var $img = $("<img class='up-img up-opcity'>");
			         $img.attr("src",imgArr[i]);
			         $img.appendTo($section);
			     var $p = $("<p class='img-name-p'>");
			         $p.html(fileList[i].name).appendTo($section);
			     var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
			         $input.appendTo($section);
			     var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
			         $input2.appendTo($section);
			      
			   }
			}
			setTimeout(function(){
	             $(".up-section").removeClass("loading");
			 	 $(".up-img").removeClass("up-opcity");
			 },450);
			 numUp = imgContainer.find(".up-section").length;
			if(numUp >= 5){
				$(this).parent().hide();
			}
		});
	   
	    $(".z_photo").delegate(".close-upimg","click",function(){
	     	  $(".works-mask").show();
	     	  delParent = $(this).parent();
		});
			
		$(".wsdel-ok").click(function(){
			$(".works-mask").hide();
			var numUp = delParent.siblings().length;
			if(numUp < 6){
				delParent.parent().find(".z_file").show();
			}
			 delParent.remove();
		});
		
		$(".wsdel-no").click(function(){
			$(".works-mask").hide();
		});
			
			function validateUp(files){
				var arrFiles = [];//替换的文件数组
				for(var i = 0, file; file = files[i]; i++){
					//获取文件上传的后缀名
					var newStr = file.name.split("").reverse().join("");
					if(newStr.split(".")[0] != null){
							var type = newStr.split(".")[0].split("").reverse().join("");
							console.log(type+"===type===");
							if(jQuery.inArray(type, defaults.fileType) > -1){
								// 类型符合，可以上传
								if (file.size >= defaults.fileSize) {
									alert(file.size);
									alert('您这个"'+ file.name +'"文件大小过大');	
								} else {
									// 在这里需要判断当前所有文件中
									arrFiles.push(file);	
								}
							}else{
								alert('您这个"'+ file.name +'"上传类型不符合');	
							}
						}else{
							alert('您这个"'+ file.name +'"没有类型, 无法识别');	
						}
				}
				return arrFiles;
			}
	});
</script>