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

在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. 【踩坑】Nginx上配置ssl证书实现https访问

    昨天开始为域名挂上ssl证书,使得可以以https去访问服务器.按照网上所介绍的配置Nginx,然而一直访问不了网站. 第二天排查了一早上,发现不单要配置Nginx,阿里云上安全组要开启443端口,并 ...

  2. Vue.js之vue-router路由

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1概述 vue-r ...

  3. AngularJS(六):表单-复选框

    本文也同步发表在我的公众号“我的天空” 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾 ...

  4. Ionic 2 中的创建一个闪视卡片组件

    闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 ...

  5. java控制远程ssh-JSCH(二)

    github: https://github.com/wengyingjian/ssh-java-demo.git 这次找到了一套新的api,叫jsch.网上查了一下,顺便把官网的几个demo给一通拿 ...

  6. github的pull Request使用

    场景: teamA要一起做一个项目,选择用github管理自己的代码仓库,这时userA在github上新建了一个远程仓库,其他人需要通过pull request来实现提交.那么,问题来了,pull ...

  7. ssh连接github连不上

    连接github报端口22连接不上: 输入命令展示出ssh_config内容后: vim /etc/ssh/ssh_config 或者使用open /etc/ssh/ssh_config命令在文本编辑 ...

  8. UVALive 5031 Graph and Queries (Treap)

    删除边的操作不容易实现,那么就先离线然后逆序来做. 逆序就变成了合并,用并存集判断连通,用Treap树来维护一个连通分量里的名次. Treap = Tree + Heap.用一个随机的优先级来平衡搜索 ...

  9. [学习笔记] C++ 历年试题解析(三)--小补充

    小小的补充一下吧,因为李老师又把直招的卷子发出来了.. 题目 1.有指针变量定义及初始化int *p=new int[10];执行delete [] p;操作将结束指针变量p的生命期.(×) 解释:试 ...

  10. Collatz Conjecture

    4981: Collatz Conjecture 时间限制: 6 Sec  内存限制: 128 MB提交: 213  解决: 23[提交][状态][讨论版][命题人:admin] 题目描述 In 19 ...