前端上传多图片

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, 
		minimum-scale=1.0, maximum-scale=1.0"/>
		<meta charset="UTF-8">
		<title>意见与建议</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.result{
				display: inline-block;
				width:80px;
				height:80px;
				/* line-height:75px; */
				text-align:center;
				border:1px #EEEEEE solid;
				position:relative;
				color:#B3B3B3;
				margin:10px 0 10px 2.5%;
				background: none;
				padding-top: 8px;
				box-sizing: border-box;
				overflow: hidden;
			}
			.result .img_val{
				position:absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin:auto;
				max-width:100%;
				z-index:1;
				cursor:default;
			}
			.result input{display:none;}
			.result .del{
				position:absolute;
				right:0;
				top:0;
				font-size:12px;
				line-height:normal;
				color:white;
				z-index:5;
				cursor:pointer;
				width: 20px;
			}
		</style>
	</head>
	<body class="layout_body">
		<div class="layout_content graybg">
			<div id="uploadImg">
			    <label class="result">
			    	<input type="file" data-input-name="fb_images[]" multiple="multiple"/>
			    	<image class="icon-xiangji xiangji" src="img/camera.png">
			    	<p style="font-size: 0.9em">上传图片</p>
			    </label>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="application/javascript">
			$("#uploadImg input[type='file']").change(function (){
				var _this = this;
				 var inputName = $(this).data('input-name');
				// 上传数量控制，给出默认值
				if($("#zhl_admin_box").is('.zhl_admin_update_no') || $("#zhl_admin_box").is('.zhl_admin_update_two')){
					var zhl_update_num = 1;
				}else{
					var zhl_update_num = 5;
				}
				//var zhl_update_size = 1*1024*1024;//1M
				zhl_update_num = typeof zhl_update_num != "undefined" && zhl_update_num ? zhl_update_num : 1;
				var fileAll = this.files.length;
				var flag = 0;
			    for(var i=0;i<fileAll;i++){
					var file = this.files[i];
					if(!/image\/\w+/.test(file.type)){
						alert("文件必须为图片！");
						return false;
					}
		
					/*if(file.size/1024 > 1025){
					    //大于1M
		                console.log(123);
					}*/
					var reader = new FileReader();
					//var delsrc='img/close_icon.png';
					//读取文件过程方法
					reader.onerror = function (e) {
						alert('文件上传异常请关闭重试....');
					}
					reader.onabort = function(e) {
						alert('文件上传异常请关闭重试....');
					};
					reader.onload = function (e) {
		                var productHtml = '<input type="hidden" name="'+inputName+'" value="'+e.target.result+'">';//构建上传input
						var imgstr='<label class="result">'+ productHtml +'<img class="img_val" src="'+e.target.result+'"/><img src="img/close_icon.png" class="del" title="\u5220\u9664"></label>';
		
						//限制上传的图片数
						var len = $(_this).parents('#uploadImg').find('img.img_val').length;
						if(len < zhl_update_num){
							if(len == zhl_update_num-1){
								$(_this).parent().hide();
							}else{
								$(_this).parent().show();
							}
							$(_this).parent().before(imgstr);
						}else{
							if(flag==0){
								flag = 1;
								//consolel.log()
								alert('最多'+zhl_update_num+'张图片');
								$(_this).parent().hide();
								return false;
							}
							
						}
						//https://www.jb51.net/article/123542.htm,压缩
					}
					reader.readAsDataURL(file);
			    }
			});
			/**
			 * 点击删除预选的图片
			 */
			$("#uploadImg").delegate("img.del","click",function(){
				if(confirm('删除该张图片？')){
					$(this).parent().siblings('label.result').show();
					//console.log($(this).parent('label'));
		            $(this).parent('label').remove();
				}
			});
		</script>
	</body>
</html>
猜你喜欢
