怎么在php中使用layui实现前端多图上传功能

　　介绍

怎么在php中使用layui实现前端多图上传功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<强>前端html代码

& lt; div 类=發ayui-upload"比; 　　 　　& lt;才能button 类型=癰utton",类=發ayui-btn  layui-btn-normal", id=皌estList"祝辞请选择图片& lt;/button> 　　 　　& lt;才能span 类=皀um_pic"祝辞& lt;/span> 　　 　　& lt;才能div 类=發ayui-upload-list"比; 　　 　　,,,& lt; table 类=發ayui-table"比; 　　 　　,,,,,& lt; thead> 　　 　　,,,,,,,& lt; tr> 　　 　　,,,,,,,,,& lt; th>文件名& lt;/th> 　　 　　,,,,,,,,,& lt; th  id=皃ic"在图片预览& lt;/th> 　　 　　,,,,,,,,,& lt; th>大小& lt;/th> 　　 　　,,,,,,,,,& lt; th>状态& lt;/th> 　　 　　,,,,,,,,,& lt; th  id=癱ao"在操作& lt;/th> 　　 　　,,,,,,,& lt;/tr> 　　 　　,,,,,& lt;/thead> 　　 　　,,,,,& lt; tbody  id=癲emoList"祝辞& lt;/tbody> 　　 　　,,,& lt;/table> 　　 　　& lt;才能/div> 　　 　　& lt;才能button 类型=癰utton",类=發ayui-btn", id=皌estListAction"在开始上传& lt;/button> 　　 　　,,,& lt; span 类=皀um_pic"祝辞& lt;/span> 　　 　　& lt;/div>

<强> js代码

& lt; script 类型=拔谋?javascript"比; 　　 　　layui.use才能(& # 39;上传# 39;,,()函数,{ 　　 　　,,,var 美元,=,layui.jquery, 　　 　　,,,,,upload =, layui.upload; 　　 　　,,,//多文件列表示例 　　 　　,,,var  demoListView =,美元(& # 39;# demoList& # 39;), 　　 　　,,,,,uploadListIns =, upload.render ({ 　　 　　,,,,,,,elem:, & # 39; # testList& # 39; 　　 　　,,,,,,,url:,“{url(& # 39;图片/索引/上传# 39;)}“, 　　 　　,,,,,,,接受,& # 39;图像# 39; 　　 　　,,,,,,,acceptMime:, & # 39;图像/* & # 39; 　　 　　,,,,,,,尺寸:,8192年, 　　 　　,,,,,,,多:,真的, 　　 　　,,,,,,,号码:,400年, 　　 　　,,,,,,,汽车:,假的, 　　 　　,,,,,,,ext:, & # 39; jpg | png | jpeg # 39;, 　　 　　,,,,,,,bindAction:, & # 39; # testListAction& # 39; 　　 　　,,,,,,,选择:,函数(obj), { 　　 　　,,,,,,,,,var  files =,=, this.files  obj.pushFile();,//将每次选择的文件追加到文件队列 　　 　　,,,,,,,,,//读取本地文件 　　 　　,,,,,,,,,obj.preview(函数(指数,文件,,结果),{ 　　 　　,,,,,,,,,,,var  tr =, $ ((& # 39; & lt; tr  id=吧洗? # 39;,+,index  +, & # 39;“祝辞& # 39;,,& # 39;& lt; td> & # 39;, +, file.name  +, & # 39; & lt;/td> & # 39;,, & # 39; & lt; td> & lt; img  https://www.yisu.com/zixun/src=" +结果+”alt=" + file.name +”> , +(文件。大?1014).toFixed (1) +“kb ”,“等待上传 ', ' ', ' <按钮类=發ayui-btn layui-btn-xs demo-reload layui-hide”>重传> 删除 ',' ', ' '] . join ());//单个重传 　　 　　tr.find (.demo-reload)。(“点击”,函数(){ 　　 　　obj。上传(指数、文件); 　　 　　$(" #上传- " +指数);(td) .eq (2) . html(文件。大?1014).toFixed(1) +“知识库”); 　　 　　});//删除 　　 　　tr.find (.demo-delete)。(“点击”,函数(){ 　　 　　删除文件(指数);//删除对应的文件 　　 　　tr.remove (); 　　 　　uploadListIns.config.elem.next () [0]。值=";//清空值输入文件,以免删除后出现同名文件不可选 　　 　　}); 　　 　　demoListView.append (tr); 　　 　　$ (" .num_pic”)。文本(“总共【" + demoListView.find (tr)。长度+”】张图片”); 　　 　　}); 　　 　　}, 　　 　　完成:函数(res,指数(上传){ 　　 　　如果(res)。代码==0){//上传成功 　　 　　$(" #曹”)。text(“地址”); 　　 　　var tr=demoListView。找到(“tr #上传-”+指数), 　　 　　tds=tr.children (); 　　 　　tds.eq (3)。html (“上传成功 '); 　　 　　tds.eq (4)。html (' ');//清空操作 　　 　　返回删除this.files(指数);//删除文件队列已经上传成功的文件 　　 　　} 　　 　　这一点。错误(指数、上传); 　　 　　}, 　　 　　allDone:函数(obj){//当文件全部被提交后,才触发 　　 　　层。味精(“上传文件数量:【“+ obj。总+”】张,上传成功:【“+ obj。成功+”】张,失败:【“+ obj。流产+“】”,{ 　　 　　时间:3000年 　　 　　}); 　　 　　console.log (obj.total);//得到总文件数 　　 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么在php中使用layui实现前端多图上传功能