移动端多图片上传

系统管理员 2023-03-14 05:57 5阅读 0赞

前端参考于[https://blog.csdn.net/qq\_37610423/article/details/84319410][https_blog.csdn.net_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

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

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

[https_blog.csdn.net_qq_37610423_article_details_84319410]: https://blog.csdn.net/qq_37610423/article/details/84319410