layui的upload组件使用以及上传阻止测试
Posted sdlzspl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui的upload组件使用以及上传阻止测试相关的知识，希望对你有一定的参考价值。
背景：页面上一个按钮，点击弹出上传框，从按钮的方法代码开始写：处理未选择文件阻止上传；通过判断选择文件的数量，显示或隐藏上传按钮；
在js中定义： function uploadFile(){
layer.open({
type:1,
title:‘上传文件‘,
area:[‘25%‘,‘400px‘],
content:‘<div class="layui-form-item" style="margin-top:40px;">
<div class="layui-input-block">
<input class="layui-btn" type="button" id="chooseFIle" value="选择文件">
<span></span>
</div>
</div>
<div class="layui-form-item" style="margin-top:40px;">
<div class="layui-input-block">
<input class="layui-btn" type="button" id="uploadbtn" value="上传">
<span></span>
</div>
</div>‘，
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("<div title=‘"+index+"‘>"+file.name+" <span onclick=‘deletefile(""+index+"")‘>×</span></div>")
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的upload组件使用以及上传阻止测试的主要内容，如果未能解决你的问题，请参考以下文章