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+" <span onclick='deletefile(\""+index+"\")'>×</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组件使用以及上传阻止测试的更多相关文章
- React结合AntD的upload组件写头像上传
upload组件里面action就是调upload接口,获取图片url地址 setImg获取url,点击保存传到后台 action 上传头像方法 //上传头像 changeImg = info = ...
- .net core3.1 webapi + element-ui upload组件实现文件上传
首先,先看我个人的的项目结构. 这个webapi项目是专门用来做图片上传,其中分为两个控制器:单图片上传和多图片上传.而我接下来主要讲的还是单文件上传,对于多文件的上传,我暂且尚未研究成功. 其中pi ...
- jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
- 使用commons-fileupload-1.2.1.jar等组件实现文件上传
使用的主要jar包:commons-io-1.3.2.jar包;commons-fileupload-1.2.1.jar包:commons-lang-2.3.jar,在使用组件实现文件上传时候要注意前 ...
- jsp实现文件上传(二)用cos组件实现文件上传
jsp表单 <%@ page language="java" pageEncoding="utf-8"%> <html> <hea ...
- 模拟文件上传(二):使用apache fileupload组件进行文件上传
其中涉及到的jar包: jsp显示层: <%@ page language="java" import="java.util.*" pageEncodin ...
- WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞
漏洞名称: WordPress NextGEN Gallery ‘upload.php’任意文件上传漏洞 CNNVD编号: CNNVD-201306-259 发布时间: 2013-06-20 更新时间 ...
- 利用apache组件实现文件上传
实现文件上传需要引入: commons-fileupload-1.3.2.jar commons-io-2.5.jar commons-logging-1.2.jar <!DOCTYPE htm ...
- 关于plupload组件无法拍照上传的解决方案
关于plupload组件无法拍照上传的解决方案 其实是由于文件大小的问题 filters: { max_file_size: '2mb',//把这个调大些就可以了 前提是服务器支持 prevent_d ...
随机推荐
- java进程占用系统内存高,排查方法
查看所有内存占用情况 top 定位线程问题(通过命令查看16764 进程的线程情况) ps p -L -o pcpu,pmem,pid,tid,time,tname,cmd 计数 ps p -L -o ...
- 从0到1分步实现一个出生日期的正则表达式(JavaScript)
简言 在表单验证中,经常会用正则表达式做出生日期校验.本文把出生日期分割成几个部分,分步地介绍了实现一个出生日期校验的完整过程.相信您在理解了本篇的内容后,对如何编写和如何应用正则表达式会有进一步的理 ...
- 草根程序员如何进入BAT
首页 最新文章 IT 职场 前端 后端 移动端 数据库 运维 其他技术 - 导航条 - 首页 最新文章 IT 职场 前端 - JavaScript - HTML5 - CSS 后端 - Pyt ...
- iOS - NSString 封装
在实际项目开发过程中,发现字符串使用频率还是非常高的,NSString提供了很多相关的API,但是在开发过程中发现很多业务功能都是相同的.因此根据在开发过程中遇到的字符串使用场景,进行了简单封装.具体 ...
- 通过Jenkins调用自动部署war包及jar包到服务器上的Shell脚本
1)部署war包#!/bin/bashif [ id>0];then echo"stopproject" kill −9 idelse echo "project ...
- codevs 1028 花店橱窗布置
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 假设以最美观的方式布置花店的橱窗,有F束花,V个花瓶,我们用美学值(一个整 ...
- 用Jersey为Android客户端开发Restful Web Service
平时在做Android客户端的时候经常要与服务器之间通信,客户端通过服务端提供的接口获取数据,然后再展示在客户端的界面上,作为Android开发者,我们平时更多的是关注客户端的开发,而对服务端开发的关 ...
- UVA11090 Going in Cycle (二分+判负环)
二分法+spfa判负环.如果存在一个环sum(wi)<k*x,i=0,1,2...,k,那么每条边减去x以后会形成负环.因此可用spfa来判负环. 一般spfa判负环dfs最快,用stack次之 ...
- 使用ImageList组件制作动画图片
实现效果: 知识运用: Timer组件的Enabled属性 Tick事件 PictureBox控件的Image属性 ImageList组件的Images属性 实现代码: private void F ...
- String中关于BeanFactory
org.springframework.beans及org.springframework.context包是Spring IoC容器的基础.BeanFactory提供的高级配置机制,使得管理任何性质 ...