最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

layui的upload组件使用和上传阻止

来源:动视网 责编:小采 时间:2020-11-03 18:19:45
文档

layui的upload组件使用和上传阻止

layui的upload组件使用和上传阻止:背景:页面上一个按钮,点击弹出上传框,从按钮的方法代码开始写:处理未选择文件阻止上传;通过判断选择文件的数量,显示或隐藏上传按钮;在js中定义:function uploadFile(){ layer.open({ type:1, title:'上传文件, area:['
推荐度:
导读layui的upload组件使用和上传阻止:背景:页面上一个按钮,点击弹出上传框,从按钮的方法代码开始写:处理未选择文件阻止上传;通过判断选择文件的数量,显示或隐藏上传按钮;在js中定义:function uploadFile(){ layer.open({ type:1, title:'上传文件, area:['


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

在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知识请关注PHP中文网layui使用教程栏目。

文档

layui的upload组件使用和上传阻止

layui的upload组件使用和上传阻止:背景:页面上一个按钮,点击弹出上传框,从按钮的方法代码开始写:处理未选择文件阻止上传;通过判断选择文件的数量,显示或隐藏上传按钮;在js中定义:function uploadFile(){ layer.open({ type:1, title:'上传文件, area:['
推荐度:
标签: 上传 upload layui
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top