레이이의 업로드 컴포넌트 사용 및 업로드 차단

배경: 페이지에 버튼이 있습니다. 버튼의 메소드 코드 작성을 시작하세요. 선택되지 않은 파일을 처리하여 업로드 버튼을 표시하거나 숨깁니다.

js에 정의됨 ：

function  uploadFile(){
　　　　layer.open({
　　　　　　　　type:1,
　　　　　　　　title:'上传文件‘,
　　　　　　　　area:['25%','400px'],
　　　　　　　　content:&#39;<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:[&#39;关闭&#39;],
　　　　btn1:function(idx,ele){
　　　　　　　　layer.closeAll();
　　　　　　}
　　})
createUpload();
}
 
var  files ;
function createUpload(){
　　　　　　$("#uploadbtn").hide();
　　　　　　$("#chooseFile").next().next("span").text("");
　　　　　　layui.use([&#39;upload&#39;],function(){
　　　　　　　　var uploadInst = upload.render({
　　　　　　　　　　　　elem:&#39;#chooseFile&#39;,
　　　　　　　　　　　　　url:&#39; &#39;,
　　　　　　　　　　　　　　accept:&#39;file&#39;,
　　　　　　　　　　　　　auto:false,
　　　　　　　　　　　　multiple:true,
　　　　　　　　　　acceptMime:&#39;application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&#39;,
　　　　　　　　　　exts:&#39;xls|xlsx&#39;,
　　　　　　　　　　size:1024000,
　　　　　　　　　　number:5,
　　　　　　　　　　bindAction:&#39;#uploadbtn&#39;,
　　　　　　　　　　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=&#39;"+index+"&#39;>"+file.name+"  <span onclick=&#39;deletefile(\""+index+"\")&#39;>&times;</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에 대한 더 많은 지식을 보려면 PHP 중국어 웹사이트layui 사용 튜토리얼 칼럼을 주목하세요.

위 내용은 레이이의 업로드 컴포넌트 사용 및 업로드 차단의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!