zoukankan      html  css  js  c++  java
  • 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();

      }

    }

  • 相关阅读:
    2020.02.28 【ABAP随笔】- EXCEL批导程式3
    2020.02.27 【ABAP随笔】- EXCEL批导程式2
    2020.02.26 【ABAP随笔】- EXCEL批导程式1
    2020.02.24 【ABAP随笔】- EXCEL常见操作笔记 1
    2020.02.15 【ABAP随笔】- 物料主数据增强
    2020.01.14 【ABAP随笔】-程序优化笔记
    2020.01.11 【ABAP随笔】获取标准报表数据(MB52)数据进行客制ALV
    2020.01.11 【ABAP随笔】SM30常见增强操作-自动带描述等
    2020.01.10 【ABAP随笔】ALV上的下拉框
    Linux资源监控命令/工具(调试)
  • 原文地址:https://www.cnblogs.com/sdlzspl/p/9590377.html
Copyright © 2011-2022 走看看