关于layui之upload模块——上传文件按钮失效的相关bug

最近修复了一个layui的upload模块bug–非自动上传(即 auto: false )的场景中的上传按钮失效。
首先贴出layui的upload模块官网地址:https://www.layui.com/demo/upload.html
我所用的版本是layui2.3.0,但官网demo应该是最新版本layui 2.5.5的,但bug依然。
在这里插入图片描述
Bug 描述:
1、点击【选择文件】按钮正常选择第一个文件,再点击【选择文件】按钮-》弹出文件选择框,不选文件而是点击弹框的【取消】或者【关闭】按钮,之后才点击【开始上传】按钮,上传文件按钮无效。
在这里插入图片描述
2、点击【选择文件】按钮正常选择第一个文件,再点击【选择文件】按钮-》弹出文件选择框,选择不符合自定义条件的文件(比如文件size限制在2m却选择了大于2m的文件,文件格式…),就会做出相应的警告提醒(比如‘文件不能超过2.00MB’),之后才点击【上传文件】按钮,则又会弹出上一次的警告且上传文件按钮失效。
在这里插入图片描述

下面是我自己的js调用upload的代码,做了些对文件的条件限制
在这里插入图片描述

以上bug有个共同点,【开始上传】按钮时所获得的的文件(包括空文件)信息应该都是最后一次点击【选择文件】按钮所获得的,而每次走上传文件方法时又都会再走一遍验证某文件是否符合条件,导致了不符合条件的文件又被重新验证并return了警告信息。经过查看源代码确实也是验证了我的猜想~
在这里插入图片描述

重点代码就在源码的这里
在这里插入图片描述

接着我打印了这个e…
第一次正常选择了一个‘2m以下.doc’;(文件上传限制size写的是2M)
第二次选择了一个‘2m以上的测试文档.doc’,弹出提醒警告
在这里插入图片描述
下图就是我打印出来的e…
在这里插入图片描述
由上图可看到这个obj有‘chooseFiles’和‘files’两个属性。每次上传文件时都会再次验证这个obj里的文件信息,而验证时是用的chooseFiles属性的内容
在这里插入图片描述
显然,在【上传文件】时应该上传符合条件的文件才是对的,即应该用到files属性下的内容。
综上所诉放上我的解决方法:
在这里插入图片描述
以下即是我在layui的upload.js源码下改动的代码---------------

t.bindAction.off("upload.action").on("upload.action", function () { 
            var copyE=e;
            copyE.chooseFiles=copyE.files;//获取符合条件的files
            copyE.upload()  
            // e.upload()
        }),

在这里插入图片描述
Ps:文章的内容如有不妥当或者错误的地方或者更好的建议等等,也希望看到滴同学多多指正和指导呀,感谢你!如果有同学正好遇到类似的这个问题从而在此文章内有所收获的话,也可以帮我点个赞的哈哈哈哈感谢你让我增加了信心!你们一定会有福报的哈哈!!!

路漫漫其修远兮,吾将上下而求索~

  • 19
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值