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

在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. 【踩坑】springMVC 接收String参数没有判断为空

    今天在调试iReview项目的接口时,发现新增词条和新增库的时候,某些字段即使留空POST到后台时也能当做不为空. 经过排查,发现后台是使用 String 变量名 == null 这样的语句去判断变量 ...

  2. calibre电子书管理软件

    软件介绍: Calibre 是电子书管理软件,支持 Amazon.Apple.Bookeen.Ectaco.Endless Ideas.Google/HTC.Hanlin Song 设备及格式,功能十 ...

  3. java核心技术 - 17个重要的知识点

    1.Java中没有多继承,而是用接口来代替多继承 2.运行一个已经编译的程序时,Java解释器总是从指定类的main方法中的代码开始执行,因此,执行代码中必须有一个main函数. 3.Java是典型的 ...

  4. 【extjs6学习笔记】1.2 初始:MVC MVVM

    模型 这表示数据层.该模型可以包含数据验证和逻辑来保持数据.在 ext js 中, 大多数模型都与一个数据存储一起使用. 视图 这表示用户界面. 是用户在屏幕上看到的组件. 在每次互动的用户与应用程序 ...

  5. Elasticsearch-基本操作1

    Elasticsearch版本:6.0 一.文档 一个文档不仅包含数据,也包含元数据,三个必须的元数据如下 _index:具有共同特性分到一起的文档集合,标示了文档的存放位置: 名字小写,不以下划线开 ...

  6. mysql如何让自增id从1开始设置方法

    有两种方式 第一种: 如果表中数据没有用.如果直接删除数据,自动增长ID还是不会从1开始的,可以利用“清空数据表”.这样自动增长ID也将会从1开始. 清空表的sql如下 truncate table ...

  7. vs 2012打开vs2013的sln

    Project -> Properties -> General -> Platform Toolset (as IInspectable correctly commented)

  8. 空类生成对象输出的结果是什么? toString()输出 覆写Object toString()方法输出的结果是什么

    空类生成对象输出的结果是什么? 输出的是对象在内存空间地址的哈希值 com.swift.P@1db9742 空类生成对象toString()输出的结果是什么? 输出的是对象在内存空间地址的哈希值的字符 ...

  9. 关于UINavigationController的一些技巧

    未自定义任何东西的导航条效果如下: 1.自定义了 leftBarButtonItem 之后,左滑返回手势失效了,解决办法: self.navigationController.interactiveP ...

  10. Caesars Cipher-freecodecamp算法题目

    Caesars Cipher(凯撒密码.移位密码) 要求 字母会按照指定的数量来做移位. 一个常见的案例就是ROT13密码,字母会移位13个位置.由'A' ↔ 'N', 'B' ↔ 'O',以此类推. ...