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();
}
}
總結
以上是生活随笔為你收集整理的layui如何集成文件服务器,layui使用upload组件实现文件上传功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ajax error 400 4,jqu
- 下一篇： 云端存储能代替U盘吗 谁会成为最后的王者