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();

}

}

總結

以上是生活随笔為你收集整理的layui如何集成文件服务器,layui使用upload组件实现文件上传功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。