服务器端编程语言(专业超文本预处理器的缩写)结合获得前端实现多图上传

前端超文本标记语言代码

div class='layui-upload '按钮类型=' button ' class=' layui-BTN layui-BTN-normal ' id=' testList '请选择图片/button span class=' num _ pic '/span div class=' layui-upload-list ' table class=' layui-table '和tr th文件名th id=' pic '图片预览/th大小/th状态th id=' cao '操作/th/tr/ad t正文id=' DeMolist '/t正文/表/div按钮类型=' button ' class=' layui-BTN ' id=' TestListAction '开始上传/button span class=' num _ pic '/span/div js代码

脚本类型=' text/JavaScript ' layui。使用(' upload '，函数(){ var $=layui.jquery，upload=layui.upload//多文件列表示例var脱模视图=$(' #脱模')、upLoadListins=上传。渲染({ elem : ' # TestList '、URL : ' { URL(' pic/index/upload ')} ')、接受： ' images '/*、size: 8192、multiple: true、number: 400、auto: false、exts: 'jpg|png|jpeg//将每次选择的文件追加到文件队列//读取本地文件obj.preview(函数（索引、文件、结果){ var tr=$(['tr id='upload-' index ' '，' TD '文件。name/' TD '，' tdimg src=' http : '结果' ' alt='文件。name ' ' style=' width : 100px高度： 40px/td '，' td' (file.size/1014).toFixed(1) 'kb/td '，' td等待上传/td '，' td '，' button class=' layui-BTN layui-BTN-xs演示-重装layui-隐藏'重传/button '，' button class=' layui-BTN layui-BTN-xs layui-BTN-危险演示-删除'删除/button '，'/td '，'/tr'].联接(" ")；//单个重传tr.find(' .演示-重装').on('click ')，function() { obj.upload(索引，文件);$("#上传-"索引)。查找(' td ').等式(2)。html((file.size/1014).toFixed(1)“kb”)；});//删除tr.find(' .演示-删除')。on('click '，function(){ delete files[index]；//删除对应的文件tr。移除()；上传列表。配置。艾伦。next()[0].值=' ';//清空输入文件值，以免删除后出现同名文件不可选});demolistview。追加(tr)；$('.num _ pic’).文本('总共【’脱模视图。查找(' tr ')].长度'】张图片');});}，done:函数(res，index，upload) { if(res.code==0) { //上传成功$('#cao ').文本('地址');var tr=脱模视图。find(' tr # upload-' index)，TDS=tr。儿童()；tds.eq(3).html(' span style=' color : # 5FB 878；'上传成功/span’)；tds.eq(4).html(' input type=' text ' name=' imgs[]' value=' RES . file ' ' class=' layui-input '/')；//清空操作返回删除这个。文件[索引]；//删除文件队列已经上传成功的文件} this.error(索引，上传);}，allDone:函数{ //当文件全部被提交后，才触发layer.msg('上传文件数量：【目标.总计】张，上传成功：【’obj。【成功】张，失败：【’obj。中止'】，{时间： 3000 })；控制台。日志。合计)；//得到总文件数控制台。日志。成功)；//请求成功的文件数console.log(obj。中止);//请求失败的文件数}，错误：函数(索引，上传){ var tr=demolistview。find(' tr # upload-' index)，TDS=tr。儿童()；tds.eq(2).html(' span style=' color : # FF5722；'上传失败/span’)；tds.eq(4).查找('。演示-重装').移除CLaSS(' layui-hide ')；//显示重传} });});/script后端代码

公共函数uploadAction(){ $ file=$ _ FILES[' file ']；$ root _ URL='上传文件/pic/image/'；if(！is _ uploaded _ file($ file[' tmp _ name ']){ $ data=array(' code '=1，' msg'='错误');exit(json_encode($data，0))；} /* $root_url .=日期(' Ymd ').'/';*/$ ext=路径信息($ file[' name '])；$ num=make num($ this-member info[' id '])；$root_url .=$num .'/';if(！is _ dir($ root _ URL)){ mkdir($ root _ URL，0777，true)；} $ pa=file _ list : get _ file _ list($ root _ URL)；$ na=计数($ pa)1；if ($na10){ $name=$num .'-000'.$ na}elseif($na100){ $name=$num .'-00'.$ na}elseif($na1000){ $name=$num .'-0'.$ na}else{ $name=$num .'-'.$ na} $n=$root_url .$name .'.'。$ ext[' extension ']；$ result=move _ uploaded _ file($ file[' tmp _ name ']，$ n)；if($ result){ exit(JSON _ encode(array(' code '=0，' msg'='ok '，' file'=$n，' size'=$file['size'])，0))；} else { exit(JSON _ encode(array(' code '=1，' msg'='false '，' file'=$n，' size'=$file['size'])，0))；} }上传效果：

以上就是服务器端编程语言(专业超文本预处理器的缩写)结合获得前端实现多图上传的全部知识点，感谢大家对我们的支持。