layui 上传文件限制数量优化

业务场景：需要用户最多只能上传4个文件，第一次选择3个文件并上传成功，第二选择3个文件并上传成功，第三次选择3个文件，这时是触发限制数量条件（number）。现在需要解决第二次选择文件时就不能触发上传接口。

在网上搜索出很多解决方案都是改layui源码，我就不太想改。然后看到一篇文章——【使用Layui的upload上传文件在上传之前做逻辑处理并终止上传】受到启发，并优化自己代码。

//多图片上传var uploadInst = upload.render({elem: '#upload-file',url: '', multiple: true,//多文件上传auto: false,//重点，不能自动上传，手动调用obj.upload// auto: true,number:4,choose:function (obj) {let curFiles = obj.pushFile();if (Object.keys(curFiles).length>upload_file_number){layer.msg("超过文件上传限制数量");obj.preview(function(index, file, result){//删除多余的delete curFiles[index] });}else{obj.preview(function(index, file, result){//这里预览图而已，可无视$('#upload-preview').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="200" height="130" style="margin-right: 10px;">')//手动调用文件上传接口obj.upload(index, file);});}},done: function(res){//上传完毕}});

就这，多断点打印吧

layui 上传文件限制数量优化相关推荐

解决使用layui上传文件时提示“请求上传接口出现异常”
在做网站的过程中,需要用户上传文件,接收文件的接口已经写好(经过测试确定可用) 现在需要在网页上提供一个文件上传的按钮.由于原生input type="file"组件太丑,考虑使用 ...
Layui上传文件时choose事件只触发一次的问题（两种解决方案+最终解决方案源码）
问题描述:使用layui的组件实现的文件列表添加和上传,第一次弹出此页面,可添加多个文件,点击上传,可以成功上传,但再次弹出此页面时,添加文件无法触发choose方法,上传依然是正常的,话不多说,看解 ...
layui上传文件php上传接口异常,layui.upload上传图片报错“请求上传接口出现异常”...
layui.upload上传图片报错"请求上传接口出现异常"且接口报404问题在调试layui.upload上传图片时候报错"请求上传接口出现异常": 且接口 ...
layui上传文件请求接口异常_SpringMVC实现文件上传与下载，拦截器，异常处理
第一章:响应数据和结果视图 1. 返回字符串 Controller方法返回字符串可以指定逻辑视图的名称,根据视图解析器为物理视图的地址. @RequestMapping(value="/he ...
php layui 上传文件,laravel使用layui 上传文件支持pdf上传
控制器: file('file');//获取图片 $allowed_extensions = ["png", "jpg", "gif",&q ...
layui上传文件成功后回调跳转指定页面
<script>layui.use('upload', function(){var $ = layui.jquery,upload = layui.upload;//指定允许上传的文件类 ...
layui上传文件时显示正在加载
一,声明全局变量 var loadingIndex; 二, 在上传按钮点击事件中添加 //在上传按钮点击事件中添加 loadingIndex = layer.load(1, {shade: [0.5, ...
怎么接收layui上传的文件_layui 上传文件_批量导入数据UI的方法
使用layui的文件上传组件,可以方便的弹出文件上传界面. 效果如下: 点击[批量导入]按钮调用js脚本importData(config)就可以实现数据上传到服务器. 脚本: /*** * 批量导入 ...
香港主机上传文件慢怎么办？
香港主机上传文件慢怎么办?如果我们的网站在香港,而且遇到了上传文件慢的问题,我们可以试试以下的方法. 1:香港主机上传文件慢的原因香港主机上传文件慢的原因主要分为服务器负载过高. 网络带宽不足.服务 ...

layui 上传文件限制数量优化

layui 上传文件限制数量优化相关推荐

最新文章

热门文章