tp5使用layui实现多个图片上传(带附件选择),如何加载layui在此不详细说明,有需要可以百度
html代码,主要处理都是在jq中,完成方法全部原创,也许不是最简单的,但也能实现效果
首页多选图片列表 添加多选图片
ဂ添加多选图片多图片上传选择图片预览图:--> -->增加0){
index = urlList.length;
}
var img = $([
'',
'',
'',
'删除'
].join(''));
$('#demo2').append(img);
urlList.push($url);
imgList.push($urlWEB);
}
var imgList = [];
var urlList = [];
layui.use(['upload','Jquery'],function () {
$ = layui.jquery;
var upload = layui.upload;
//多图片上传
upload.render({
elem: '#upload_img'
,url:"{:url('share/upload_img')}" //上传接口
,multiple: true
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
})
}
,done: function(res){
var index0 = 0;
if(urlList.length>0){
index0 = urlList.length;
}
var img0 = $([
'',
'',
'',
'删除'
].join(''));
$('#demo2').append(img0);
urlList.push(res.url);
imgList.push(res.msg);
}
,error: function(){
// layer.close(layer.msg());//关闭上传提示窗口
//请求异常回调
}
});
});
function delImg(index){
urlList.splice(index,1);
imgList.splice(index,1);
$('#demo2').empty();
for (var i=0;i',
'',
'',
'删除'
].join(''));
$('#demo2').append(img0);
}
}
function selectImg(title,url,w,h){
x_admin_show(title,url,w,h);
}" _ue_custom_node_="true">
PHP代码
//php layui图片上传
public function upload_img(){
$file = request()->file('file'); // 获取上传的文件
if($file==null){
exit(JSON_encode(array('code'=>1,'msg'=>'未上传图片')));
}else{
//5、对上传文件做出条件限制(类型,大小等)
$map = [
'ext'=>'jpg,png,gif,jpeg',//后辍名
'size'=>320000000,//最大3M
];
//6、对上传的文件进行较验,如果合格就进行转移到预定设定好的public/uploads目录下
//返回保存的文件信息info,包括文件名和大小等数据
$info = $file->validate($map)->move(ROOT_PATH . 'public/uploads/img');
//获取图片宽高
list( $width , $height , $type , $attr ) = getimagesize ($info->getPathName());
if(is_null($info)){
$this->error($info->getError());
}
$img = str_replace('\\','/',$info->getSaveName());
//保存附件
$annexData['filesize'] = $info->getInfo()['size'];
$annexData['mimetype'] = $info->getInfo()['type'];
$annexData['filename'] = $info->getInfo()['name'];
$annexData['imagewidth'] = $width;
$annexData['imageheight'] = $height;
$annexData['type'] = 'img';
$annexData['url'] = $img;
AAnnexModel::create($annexData);
$img = constant("URL")."/uploads/img/".$img;
exit(json_encode(array('code'=>0,'msg'=>$img,'url'=>$annexData['url'])));
}
}
//多选图片添加页面
public function addImages(){
if($this->request->isPost()){
//2、获取提交过来的数据,最后true参数,表示连上传文件一起获取
$data = $this->request->param(true);
$res = aimagesModel::create($data);
if(is_null($res)){
$this->error('文件添加失败');
}else{
$this->success('文件添加成功...',url('imagesList'));
}
return;
}
return $this->fetch('images_add');
}
到此这篇关于tp5使用layui实现多个图片上传(带附件选择)的方法实例的文章就介绍到这了。
标签:info,img,url,layui,annexData,tp5,上传
From: https://www.cnblogs.com/dituirenwu/p/17095147.html