您现在的位置是:首页 >技术点滴> PHP 网站首页PHP

php结合layui前端实现多图上传

  • phper
  • PHP
  • 2019-08-22
  • 426 次阅读
  • 原创
layui  
本次上传测试是在 Finecms框架,结合layui的多图上传

前言:本次上传测试是在 Finecms框架

1、效果图

效果图上完了,就开始代码咯!


2、前端html代码

请选择图片文件名图片预览大小状态操作
		    开始上传

3、js 代码

', '' + file.name + '', '', '' + (file.size / 1014).toFixed(1) + 'kb', '等待上传', '', '重传', '删除', '', ''].join(''));
						//单个重传
						tr.find('.demo-reload').on('click', function() {
							obj.upload(index, file);
							$("#upload-" + index).find("td").eq(2).html((file.size / 1014).toFixed(1) + 'kb');
						});
 
						//删除
						tr.find('.demo-delete').on('click', function() {
							delete files[index]; //删除对应的文件
							tr.remove();
							uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
						});
 
						demoListView.append(tr);
						$(".num_pic").text("总共【" + demoListView.find("tr").length + "】张图片");
					});
				},
 
				done: function(res, index, upload) {
					if(res.code == 0) { //上传成功
						$("#cao").text("地址");
						var tr = demoListView.find('tr#upload-' + index),
							tds = tr.children();
						tds.eq(3).html('上传成功');
						tds.eq(4).html(''); //清空操作
						return delete this.files[index]; //删除文件队列已经上传成功的文件
					}
					this.error(index, upload);
				},
				allDone: function(obj) { //当文件全部被提交后,才触发
					layer.msg("上传文件数量:【" + obj.total + "】张,上传成功:【" + obj.successful + "】张,失败:【" + obj.aborted + "】", {
						time: 3000
					});
					console.log(obj.total); //得到总文件数
					console.log(obj.successful); //请求成功的文件数
					console.log(obj.aborted); //请求失败的文件数
				},
				error: function(index, upload) {
					var tr = demoListView.find('tr#upload-' + index),
						tds = tr.children();
					tds.eq(2).html('上传失败');
					tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
				}
			});
 
	});" _ue_custom_node_="true">

 4、后端上传图片代码

 public function uploadAction(){
        $file=$_FILES['file'];
        $root_url =  'uploadfiles/pic/image/';        if (!is_uploaded_file($file['tmp_name'])){
            $data = array('code'=>1,'msg'=>"错误");            exit(json_encode($data,0));
        }      /*  $root_url.=date('Ymd').'/';*/

        $ext = pathinfo($file['name']);
        $num=makenum($this->memberinfo['id']);
        $root_url.=$num.'/';        if (!is_dir($root_url)) {
            mkdir($root_url,0777, true);
        }
        $pa=file_list::get_file_list($root_url);
        $na=count($pa) + 1;        if ($na$n,"size"=>$file['size']),0));
        }else{            exit(json_encode(array("code"=>1,"msg"=>"false","file"=>$n,"size"=>$file['size']),0));
        }
    }




转载: 感谢您对【phper】网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处【来源 phper: https://www.birdeyes.cn/article/29/6.html】。

文章评论

请君开口
欢迎您:
    • 最新评论(0)
    暂时没有评论
Top