移动端多图片上传

前端参考于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

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 = $("");var fileName = file[i].name;    //获取当前文件的文件名var url = createObjectURL(file[i]); //获取当前文件对象的URLimgTag.attr("src",url);//最佳显示var imgbox = $("×");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);}//单张最大2Mif($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);}

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！