移动端多图片上传

前端参考于https://blog.youkuaiyun.com/qq_37610423/article/details/84319410

原版只能上传单张，经过调整修改可以满足于批量多张图片上传并附带与php后端交互，记录于下

CSS

#fileBox{
	padding-left:15px;
	min-height:0px;overflow:hidden;
	padding-bottom:20px;
	padding-top:5px;
} 
#fileBox label{
	border: 1px solid #ccc;
	display:block;
	float:left;
	height:60px;
	width:60px;
	background:url("/static/img/ts_tip2.jpg") no-repeat center;
	background-size: 60px;
	background-color: #ccc;
	margin-left: 0px;
} 
#fileBox .file-btn{
	height:60px;
	width:60px;
	opacity:0;
} 
#fileBox .review-box{
	display:block;
	float:left;
} 
#fileBox .review-box img{
	height:60px;
	width:60px;
	margin:0 .1rem .2rem 0;
} 
#fileBox .prev-item{
	position:relative;display:inline-block;margin-right:6px;
} 
#fileBox .prev-item .closebtn{
	position:absolute;
	right: -1px;
	top: -4px;
	display: block;
	height: 14px;
	width: 14px;
	color: #fff;
	font-size: 16px;
	line-height:14px;
	text-align: center;
	background: red;
	border-radius: 10px;
}
#fileBox .prev-item .closebtn {
	position: absolute;
	right: 0px; 
	top: -4px;
	display: block;
	height: 14px;
	width: 14px;
	color: #fff;
	font-size: 16px;
	line-height: 14px;
	text-align: center;
	background: #8E8E93;
	border-radius: 10px;
}

html

<div class="file-box" id="fileBox">
		<label class="clone-dom" style="display:none;">
			<input type="file" multiple="multiple" class="file-btn" name="img[]"/>
		</label> 
		<div class="review-box"></div> 
		<label><input type="file" multiple="multiple" class="file-btn clone-dom" name="img[]"/></label> 
	</div> 

js

var box = $("#fileBox .review-box");    //显示图片box
var file = $("#file"); //file对象
var fileLists = []; //定义数组

$("#fileBox").on("click", ".file-btn",function(){
	var count=$('.review-box').children('.prev-item').length;
	if(count >= 3){
		alert("最多可以上传3张图片！");
		return false;
	}
});

//触发选中文件事件
$("#fileBox").on("change", ".file-btn", function(event){

	var file = event.target.files;  //获取选中的文件对象
	var count=$('.review-box').children('.prev-item').length;

	if ((file.length+count)>3){
		alert("最多可以上传3张图片！");
		return false;
	}

	for(i = 0; i< file.length; i ++) {

		//console.log(file[i]);
		var size = file[i].size;
		if(size > 2 * 1024 * 1024 ) {//限制图片大小只能在2M以内
			alert('图片大小不能超过2M');
			break;
			return false;
		}
		
		var imgTag = $("<img src=''/>");
		var fileName = file[i].name;    //获取当前文件的文件名
		var url = createObjectURL(file[i]); //获取当前文件对象的URL
		imgTag.attr("src",url);
		//最佳显示
		var imgbox = $("<div class='prev-item'><span class='closebtn'>×</span></div>");
		imgbox.append(imgTag);
		box.append(imgbox);
		event.target.parentNode.style.display = "none";
		fileLists.push(file[i]);

	}
	
	var cloneDom = $(".clone-dom").eq(0).clone().removeAttr("style");
	$("#fileBox").append(cloneDom);
	
});

	$('.submit').click(function(){


		//formdata储存异步上传数据
		var formData = new FormData($('form')[0]);
		for (i = 0; i < fileLists.length; i++) { //通过循环读出/赋值
			formData.append('file[]',fileLists[i]);
		}

		//无论怎么传数据,console.log(formData)都会显示为空,因为formData需要用自己的方法查看,但其实值是存在的,f12查看Net tab里面的header可以看到数据被发送了
		$.ajax({
			url:'/?m=weixin&c=ts&a=save',
			type: 'POST',
			data: formData,
			//这两个设置项必填
			contentType: false,
			processData: false,
			success:function(data){
				alert(data);
			}
		})

	});

后端php处理部分 

//基本信息录到信息表里 拿出插入表的主键id
		
		
		$files=$_FILES['file'];


		//有图片上传进入图片流程
		if(!empty($files)){

			//调整上传的FILE数组格式
			foreach($files as $k=>$v) {
				foreach($v as $kk=>$vv) {
					$arr[$kk][$k]=$vv;
				}
			}


			//循环图片批量处理
			$imgtype=array("jpg","gif","bmp","jpeg","png","wbmp","heic");

			foreach($arr as $k=>$v) {
				
				$size=$v['size'];
				$type=$v['type'];
				$name=$v['name'];
				$tmp_name=$v['tmp_name'];
				$error=$v['error'];

				//上传错误
				if(!empty($error)){
                    //1大小超出php配置的最大值 upload_max_filesize设置 2超出表单限制 3文件只被部分上传 4没有上传任何文件 6没有指定临时目录 7文件写入磁盘失败
					exit('上传出错'.$error);
				}
				
				//判断合法后缀类型
				if(!in_array(strtolower(substr(strrchr($name,'.'),1)),$imgtype)){  
					$text=implode('.',$imgtype);  
					exit("您只能上传以下类型文件: ".$text);
				}

				//单张最大2M
				if($size>(1024*1024*2)){
					exit("单张大小不能超过2M：".$name);
				}

				//压缩品质

				//重命名并移到图片目录
				$filename=time().rand(1,1000).'.jpg';
				$updir=实际目录.date('Ym',time()).'/';

				//目录不存在则创建多级目录
				if(!file_exists($updir)){
					mkdir($updir,0777,true);
				}
				
                if(is_uploaded_file($tmp_name)){//确保是上传的文件而不是伪造的本地文件

				    if(move_uploaded_file($tmp_name,$updir.$filename)){
					
					    //移动成功后将图片链接存入数据表 用信息表id做关联
					
				    }else{  
					    $errorarr[]= $name;
				    }
                }else{
                    exit('文件上传失败');
                }


			}
			
			if(!empty($errorarr)){
				$fi=implode('|',$errorarr);
				exit('上传失败：'.$fi);
			}
			print_r($arr);
			
		}

像压缩品质 水印等等功能可自行完善