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

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

  }

}

layui的upload组件使用以及上传阻止测试的更多相关文章

  1. React结合AntD的upload组件写头像上传

    upload组件里面action就是调upload接口,获取图片url地址 setImg获取url,点击保存传到后台   action 上传头像方法 //上传头像 changeImg = info = ...

  2. .net core3.1 webapi + element-ui upload组件实现文件上传

    首先,先看我个人的的项目结构. 这个webapi项目是专门用来做图片上传,其中分为两个控制器:单图片上传和多图片上传.而我接下来主要讲的还是单文件上传,对于多文件的上传,我暂且尚未研究成功. 其中pi ...

  3. jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  4. 使用commons-fileupload-1.2.1.jar等组件实现文件上传

    使用的主要jar包:commons-io-1.3.2.jar包;commons-fileupload-1.2.1.jar包:commons-lang-2.3.jar,在使用组件实现文件上传时候要注意前 ...

  5. jsp实现文件上传(二)用cos组件实现文件上传

    jsp表单 <%@ page language="java" pageEncoding="utf-8"%> <html> <hea ...

  6. 模拟文件上传(二):使用apache fileupload组件进行文件上传

    其中涉及到的jar包: jsp显示层: <%@ page language="java" import="java.util.*" pageEncodin ...

  7. WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞

    漏洞名称: WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞 CNNVD编号: CNNVD-201306-259 发布时间: 2013-06-20 更新时间 ...

  8. 利用apache组件实现文件上传

    实现文件上传需要引入: commons-fileupload-1.3.2.jar commons-io-2.5.jar commons-logging-1.2.jar <!DOCTYPE htm ...

  9. 关于plupload组件无法拍照上传的解决方案

    关于plupload组件无法拍照上传的解决方案 其实是由于文件大小的问题 filters: { max_file_size: '2mb',//把这个调大些就可以了 前提是服务器支持 prevent_d ...

随机推荐

  1. SQL SERVER 同一个表并且是同一个时间字段进行相减

    表AID NUM TIEM1 10 2012-06-10 10:10:002 20 2012-06-10 20:10:003 20 2012-06-10 20:10:004 10 2012-06-10 ...

  2. guacamole 0.9.13安装与配置

    以下命令很多都需要管理权限,建议使用管理员账号执行,遇到问题可以留言. Guacamole官网文档介绍翻译:http://www.cnblogs.com/ji-yun/p/5657709.html 1 ...

  3. 转:IOS程序之间的文件共享

    原文 System-Declared Uniform Type Identifiers One of the common tasks that an iOS developer has to do ...

  4. 关于原生javascript的this,this真是个强大的东东

    最近一直坐在东钿微信服务平台,上上级领导提出一个要求,就是微信分享. 因为首页是一个tab切换页,领导想在分享的时候区分上产调还是评估.我研究了很久很久,一直都是失败,今天领导又问了.于是我就向我们老 ...

  5. ios 利用kvc 监听可变数组变化

    KVO键值监听: Key-Value Observing,它提供一种机制,当指定的对象的属性被修改后,则对象就会接受到通知.简单的说就是每次指定的被观察的对象的属性被修改后,KVO就会自动通知相应的观 ...

  6. Android的bitmap和优化

    内存管理是个永恒的话题! 内存溢出:就是分配的内存不足以放下数据项序列.如在一个域中输入的数据超过了它的要求就会引发数据溢出问题,多余的数据就可以作为指令在计算机上运行.就是你要求分配的内存超出了系统 ...

  7. (三)我的JavaScript系列:不同调用方式的this指向

    人生自是有情痴,此恨不关风与月 今天所写的内容,是对之前的内容的总结和扩展.老实说,对于自己之前的一些杜撰和臆测,我并不是很满意.所以这篇博文,我希望能来点干货. 不同调用方式的this指向 在Jav ...

  8. Windows Azure 配置Active Directory 主机(1)

    现在越来越多企业将自己业务系统迁移云端,方便公司日常运维管理.这篇文章将简单介绍一下,从 Windows Azure 虚拟网络上的虚拟机 (VM) 中的 Corp Active Directory 林 ...

  9. jmeter参考网址

    http://blog.csdn.net/dongdong9223/article/details/49248979 http://blog.csdn.net/hjh00/article/detail ...

  10. 数据库之存储过程-- 基于MySQL

    存储过程基本语法 create procedure procedure_name  [;number] [{@parameter data_type}[varying][=default][outpu ...