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 ...
随机推荐
- 【持续更新】MyBatis相关
MyBatis开发结构 #与$的区别
- w3c万维网的介绍和html基本构成
怎么与浏览器交互? 1.鼠标 2.键盘输入 w3c标准: 中文名:万维网联盟!外文名:world wide web cansortium万维网联盟创建于1994年,是web技术领域最具权威个影响的国际 ...
- 告别CMD.windows终端神器conemu设置
前言 一种刘姥姥进大观园的感觉,现在是见啥啥新鲜.因为之前不怎么接触到命令操作,平时偶尔用用cmd也没觉得什么不妥.直到现在经常调试脚本,使用git越发感觉不方便.看见同事使用的terminal绚丽夺 ...
- HDU 2089 不要62 (数位DP,入门)
题意: 只要含连续的62,或者含4的车牌号码都是不吉利的,其他都是吉利的组合.问区间[L,R]中有多少个数是吉利的? 思路: 依然是利用树(10进制是十叉树)的思想,统计左边所有子树有多少个数是吉利的 ...
- 洛谷 P3019 [USACO11MAR]会见点Meeting Place
题目背景 征求翻译.如果你能提供翻译或者题意简述,请直接发讨论,感谢你的贡献. 题目描述 Bessie and Jonell are great friends. Since Farmer John ...
- 2018.5.5 phpStorm破解2017.3版本方法
方法一 注册时,在打开的License Activation窗口中选择"License server",在输入框输入下面的网址: http://im.js.cn:8888 (新) ...
- scanf()的使用
scanf函数称为格式输入函数,即按用户指定的格式从键盘上把数据输入到指定的变量之中. 如下面代码: #include<stdio.h> int main() { int a,b; sca ...
- cocos2dx通过ndk编译c++库
ndk编译c++库,然后通过jni调用实现重要代码封装,是安卓应用中最常用的技术,一方面可以将重要的代码实现隐藏,防止泄漏,也可以提高打包速度. ndk里面的sample文件夹中有很多实用的例子,其中 ...
- odoo前端
bootstrap: http://www.runoob.com/bootstrap/bootstrap-tutorial.html javascript: http://www.runoob.com ...
- 关于在vue 中使用百度ueEditor
1. 安装 npm i vue-ueditor --save-dev 2.从nodemodels 取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 3.配置 ued ...