jQuery多图上传插件

本文由清尘发表于2017-08-24 16:51最后修改于2017-08-29属于jQuery分类

点击查看演示

HTML代码:

<p>选择上传图片:</p>
	       <div class="z_photo upimg-div clear" >
                     <section class="z_file fl">
                      <img src="img/zs_addimg.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>
        <div 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>
    </div>

JS代码:

$(function() {
	var delParent;
	var defaults = {
		fileType: ["jpg", "png", "bmp", "jpeg"], // 上传文件的类型
		fileSize: 1024 * 1024 * 10 // 上传文件的大小 10M
	};
	/*点击图片的文本框*/
	$(".file").change(function() {
		var idFile = $(this).attr("id");
		var file = document.getElementById(idFile);
		var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
		var fileList = file.files; //获取的图片文件
		console.log(fileList + "======filelist=====");
		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", "img/a7.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();
		}

		//input内容清空
		$(this).val("");
	});



	$(".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;
	}



})

CSS代码:

.img-box{margin-top:40px;}
.img-box .up-p{margin-bottom:20px;font-size:16px;color:#555;}
.z_photo{padding:10px 0; width: 520px;}
.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; border:2px solid #fff;}
.up-section .close-upimg{position:absolute;top:2px;right:2px;display:block;z-index:10; width: 22px; height: 22px;}
.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(img/loading.gif) no-repeat center;}
.up-opcity{opacity:0;}
.img-name-p{display:none;}
.upimg-div .up-section{width:80px;height:80px;}
.img-box .upimg-div .z_file{width:80px;height:80px;}
.z_file .add-img{display:block;width:80px;height:80px;}


.mask{z-index:1000;display:none;position:fixed;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,.4); opacity: 1;}
.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;}
.fl{float: left; display: inline;}
.clear::after{clear:both;content:"";display:block;}

===================

动态插入HTML,增加多组上传组件时。需要把file改为事件代理可用。

	$('.edPlBox').delegate('.file','change',function(){
		var idFile = $(this).attr("id");
		var file = document.getElementById(idFile);
		var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
		var fileList = file.files; //获取的图片文件
		console.log(fileList+"======filelist=====");
		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","css/m/a7.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();
		}
		
		//input内容清空
		$(this).val("");
	})