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

在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. java进程占用系统内存高,排查方法

    查看所有内存占用情况 top 定位线程问题(通过命令查看16764 进程的线程情况) ps p -L -o pcpu,pmem,pid,tid,time,tname,cmd 计数 ps p -L -o ...

  2. 从0到1分步实现一个出生日期的正则表达式(JavaScript)

    简言 在表单验证中,经常会用正则表达式做出生日期校验.本文把出生日期分割成几个部分,分步地介绍了实现一个出生日期校验的完整过程.相信您在理解了本篇的内容后,对如何编写和如何应用正则表达式会有进一步的理 ...

  3. 草根程序员如何进入BAT

        首页 最新文章 IT 职场 前端 后端 移动端 数据库 运维 其他技术 - 导航条 - 首页 最新文章 IT 职场 前端 - JavaScript - HTML5 - CSS 后端 - Pyt ...

  4. iOS - NSString 封装

    在实际项目开发过程中,发现字符串使用频率还是非常高的,NSString提供了很多相关的API,但是在开发过程中发现很多业务功能都是相同的.因此根据在开发过程中遇到的字符串使用场景,进行了简单封装.具体 ...

  5. 通过Jenkins调用自动部署war包及jar包到服务器上的Shell脚本

    1)部署war包#!/bin/bashif [ id>0];then echo"stopproject" kill −9 idelse echo "project ...

  6. codevs 1028 花店橱窗布置

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description 假设以最美观的方式布置花店的橱窗,有F束花,V个花瓶,我们用美学值(一个整 ...

  7. 用Jersey为Android客户端开发Restful Web Service

    平时在做Android客户端的时候经常要与服务器之间通信,客户端通过服务端提供的接口获取数据,然后再展示在客户端的界面上,作为Android开发者,我们平时更多的是关注客户端的开发,而对服务端开发的关 ...

  8. UVA11090 Going in Cycle (二分+判负环)

    二分法+spfa判负环.如果存在一个环sum(wi)<k*x,i=0,1,2...,k,那么每条边减去x以后会形成负环.因此可用spfa来判负环. 一般spfa判负环dfs最快,用stack次之 ...

  9. 使用ImageList组件制作动画图片

    实现效果: 知识运用: Timer组件的Enabled属性  Tick事件 PictureBox控件的Image属性 ImageList组件的Images属性 实现代码: private void F ...

  10. String中关于BeanFactory

    org.springframework.beans及org.springframework.context包是Spring IoC容器的基础.BeanFactory提供的高级配置机制,使得管理任何性质 ...