layui如何集成文件服务器,layui使用upload组件实现文件上传功能

layui使用upload组件实现文件上传功能

发布时间：2020-05-22 17:25:25

来源：亿速云

阅读：309

作者：鸽子

背景：页面上一个按钮，点击弹出上传框，从按钮的方法代码开始写：处理未选择文件阻止上传；通过判断选择文件的数量，显示或隐藏上传按钮；

在js中定义：function uploadFile(){

layer.open({

type:1,

title:'上传文件‘,

area:['25%','400px'],

content:'

\

\

\

\

\

\

\

\

\

\

\

‘，

btn:['关闭'],

btn1:function(idx,ele){

layer.closeAll();

}

})

createUpload();

}

var files ;

function createUpload(){

$("#uploadbtn").hide();

$("#chooseFile").next().next("span").text("");

layui.use(['upload'],function(){

var uploadInst = upload.render({

elem:'#chooseFile',

url:' ',

accept:'file',

auto:false,

multiple:true,

acceptMime:'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

exts:'xls|xlsx',

size:1024000,

number:5,

bindAction:'#uploadbtn',

choose:function(obj){

files = this.files = boj.pushFile();

if(Object.keys(files).length>0){ $("#uploadbtn").show(); }

obj.preview(function(index,file,result){

$("#chooseFile").siblings("span").append("

"+file.name+"   ×

")

if(index>0) {$("#uploadbtn").show() ;}

})

},

allDone:function(obj){

if(obj.successful){

layer.msg(obj.total+"个文件上传成功!");

}

},

error:function(){

layer.alert("上传成功!");

}

})

}

}

function deletefile(index){

delete files[index];

$("#chooseFile").siblings("span").find("div[title="+index+"]").remove();

if(!Object.keys(files).length>0){

$("#uploadbtn").hide();

}

}