• 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+"&nbsp;&nbsp;<span onclick='deletefile(""+index+"")'>&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();

      }

    }

  • 相关阅读:
    url-pattern / /*匹配
    velocity入门
    配置eclipse插件
    Myeclipse 2014 破解
    Eclipse kepler 安装 Dynamic Web Project差距WTP
    Errors running builder 'Faceted Project Validation Builder' on project
    JSF web.xml的各类参数属性配置
    bpm 学习笔记一
    love is ... ...
    .sh_history文件的管理机制
  • 原文地址:https://www.cnblogs.com/sdlzspl/p/9590377.html
Copyright © 2020-2023  润新知