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 ...
随机推荐
- Kendo MVVM 数据绑定(八) Style
Kendo MVVM 数据绑定(八) Style Style 绑定可以通过 ViewModel 绑定到 DOM 元素 CSS 风格属性,例如: <span data-bind="sty ...
- 快色排序算法(C语言描述)
快速排序 算法思想 快速排序采用了一种分治策略,学术上称之为分治法(Divide-and-Conquer Method). 哨兵(如下算法中的key) 每趟排序将哨兵插入到数组的合适位置,使得哨兵左侧 ...
- Failed to crunch file
Failed to crunch file 编译时,出现以上错误,经过多次排除验证,原因尽然是因为路径字符太长了... 编译路径不能超过240个字符
- 【extjs6学习笔记】1.6 初始:本地化
app.json中修改
- CentOS-语言设置
查看所有的locale语言 # locale -a # locale -a|grep en 查看当前操作系统使用的语言 # echo $LANG 设置系统locale语言为中文环境(永久生效) # v ...
- 【Python图像特征的音乐序列生成】使用Python生成简单的MIDI文件
这个全新的Python音乐创作系列,将会不定期更新.写作这个系列的初衷,是为了做一个项目<基于图像特征的音乐序列生成模型>,实时地提取照片特征,进行神经网络处理,生成一段音乐. 千里之行, ...
- UVA 11093 Just Finish it up 环形跑道 (贪心)
有一个环形跑道,上面有n个加油站,到i号加油站可以加pi的油,跑到下一站要花费qi的油,起点任意选,问是否有一个起点可跑完整个跑道. 从i开始跑,如果遇到某个站j不能跑了,那么从i到j之间的站开始跑, ...
- kubernetes监控-Heapster+InfluxDB+Grafana(十五)
cAdvisor+InfluxDB+Grafana cAdvisor:是谷歌开源的一个容器监控工具,采集主机上容器相关的性能指标数据.比如CPU.内存.网络.文件系统等. Heapster是谷歌开源的 ...
- C++内联函数、宏定义和普通函数的区别
C++内联函数.宏定义和普通函数的区别? 宏定义:在预处理阶段进行简单的文本替换,不会进行参数类型检查: 内联函数:在编译器的时候进行代码插入,编译器会在每次调用内联函数的地方直接将内联函数的内容展开 ...
- jquery的正则表达式
正则表达式 位置: ^ 开头 $ 结尾 次数: * 0或多个 + 1或多个 ? 0或1个 {n} 就是n个 {n,} 至少n个 {n,m} ...