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代码之斗地主发牌
理解很好理解,关键是思路 按照斗地主的规则,完成洗牌发牌的动作: 具体规则: 1. 组装54张扑克牌 2. 将54张牌顺序打乱 3. 三个玩家参与游戏,三人交替摸牌,每人17张牌,最后三张留作底牌. ...
- require.js 模块化简单理解
组件化 基于UI 样式布局 没有过多 js 代码操作的 比如:一个导航栏 一个表单 一个搜索框 一个侧边栏 一个html 等等.... 模块化 基于功能模块 一个可以替换的js部分称之为模块(modu ...
- java面试题(杨晓峰)---以面试题为切入点,有效提升你的java内功
java是一门历史悠久的编程语言,可以毫无争议的说,java是最主流的编程语言之一.全球有1200万以上的java程序猿以及海量的设备,还有无所不能的java生态圈. 我所知道的诸如阿里,京东,百度, ...
- 【Apache】HTTPD 2.4.37 + OpenSSL 1.1.1 企业级安全配置(含TLS修复)
我为什么要写这一篇稿子? 为了避免更多的运维.开发者没能实现企业的信息安全,我将共享出我个人的HTTPD的安全修复(2.2和2.4差不太多就看2.4就好) 起因:我为某M工作,但因某M和testin合 ...
- Django form组件应用
form 组件的使用 class Register(forms.Form): user = forms.CharField(min_length=2, widget=widgets.TextInput ...
- 用python写trojan的过程中遇到的各种问题
由于之前已经conn, addr = s.accept() 所以改为 conn.recv spyder无法同时运行client 和 server 分别在spyder和anaconda prompt运 ...
- solver
slover中有type,用于优化算法的选择,有6种: Stochastic Gradient Descent (type: “SGD”), AdaDelta (type: “AdaDelta”), ...
- win7便笺元数据损坏,最新解决办法
Windows7系统开机时出现“部分便笺的元数据已被破坏,便笺已将其恢复为默认值.”问题,最新解决办法,图文说明,亲测,希望可以帮到大家 工具/原料 Windows7系统 InkObj.dll.T ...
- 什么是redis的持久化?
什么是redis的持久化? RDB 持久化:该机制可以在指定的时间间隔内生成数据集的时间点快照(point-in-time snapshot). AOF 持久化:记录服务器执行的所有写操作命令,并在服 ...
- python报错UnicodeDecodeError:
Python 里面的编码和解码也就是 unicode 和 str 这两种形式的相互转化.编码是 unicode -> str,相反的,解码就 是 str -> unicode.剩下的问题就 ...