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();

      }

    }

  • 相关阅读:
    字节跳动在 Go 网络库上的实践
    TCP报文段的首部格式 20字节的固定首部
    网易公开课 文件描述符 索引
    网易新闻App架构重构实践:DDD正走向流行
    货 | 携程是如何做AB实验分流的
    Pusher Channels Protocol | Pusher docs https://pusher.com/docs/channels/library_auth_reference/pusher-websockets-protocol
    避免重复提交?分布式服务的幂等性设计! 架构文摘 今天 点击蓝色“架构文摘”关注我哟 加个“星标”,每天上午 09:25,干货推送! 来源:https://www.cnblogs.com/QG-whz/p/10372458.html 作者:melonstreet
    前置时间(Lead Time),也称前置期、备货周期
    滴滴业务研发的精益实践
    DevOps运动的缘起 将DevOps想象为一种编程语言里面的一个接口,而SRE类实现了这个接口
  • 原文地址:https://www.cnblogs.com/sdlzspl/p/9590377.html
Copyright © 2011-2022 走看看