layui upload怎么防止上传过程中用户重复点击造成重复提交

大伟君_1918

大伟君_1918

2026-10-29

705人浏览

原创

必须在choose回调最开头禁用上传按钮,使用prop('disabled',true)并同步修改文字和样式;禁用仅限按钮本身,避免影响校验;需在done、error、complete三处统一恢复,且须排查layui.js重复引入导致的多实例绑定问题。

layui upload怎么防止上传过程中用户重复点击造成重复提交

upload.render 里 submit 按钮没禁用,点击就发多请求

用户点一次上传按钮,Layui 默认会立刻触发 choose 回调,但此时按钮仍是可点击状态。如果用户手快连点两下,就会触发两次 choose,进而调用两次 obj.upload()——哪怕后端做了幂等,前端也已把多个文件塞进队列、重复预览、重复生成 DOM 节点。

必须在 choose 回调最开头就禁用按钮,且仅禁用按钮本身:

  • $('#upload-btn').prop('disabled', true).addClass('layui-btn-disabled').text('上传中…')
  • 别用 attr('disabled', 'disabled'),部分浏览器不触发语义变更
  • 禁用动作不能写在 done 或 error 里——那时请求早发出去了
  • 如果页面用过 layui.form.render() 重绘表单,禁用状态会被清空,需在 render 后手动补设

multiple: true 时,choose 中的 this.files 是引用,不是拷贝

当启用多文件上传(multiple: true),choose 回调里的 this.files 是一个实时更新的 FileList 对象。如果你在回调里直接操作 this.files(比如 delete this.files[0]),后续再点按钮,obj.files 可能为空或错位——但这不是重复提交的主因,而是导致「你以为点了却没反应」的隐藏坑。

真正引发重复的关键是:每次点击都新建一个 obj 实例,而每个实例都拥有独立的 upload() 方法。所以防重复必须绑定到按钮上,而不是靠清理 this.files。

  • 不要在 choose 里做 delete this.files[i],改用闭包变量缓存原始 File 数组(如 pendingFiles = Array.from(obj.files))
  • 按钮禁用后,即使用户再点,choose 也不会执行——前提是禁用逻辑写在事件源头(即按钮 click 绑定前)
  • 若上传区域是动态插入的 DOM,确保 upload.render() 在元素存在后再调用,否则 elem 找不到,绑定失败,按钮始终可点

移动端 touchstart 阶段比 click 更早拦截双击

安卓 WebView 和旧版 iOS 存在 300ms click 延迟,用户快速连点可能触发两个 click 事件,即使你用了 prop('disabled', true),也可能因时机差几毫秒而失效。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

解决方案是提前在 touchstart 阶段锁死:

  • 给上传按钮同时绑定 touchstart 和 click,并在 touchstart 里立即禁用:$('#upload-btn').on('touchstart', function() { $(this).prop('disabled', true) })
  • 避免同时监听 touchend 和 click,容易重复触发;统一用 click + preventDefault() + 禁用更稳妥
  • 禁用后记得在 done / error / always 三处都恢复,不能只靠 success

重复引入 layui.js 导致 upload 绑定多次

这是最隐蔽也最常被忽略的根源:HTML 中同时存在 <script src="layui.js"></script> 和 <script src="layui.all.js"></script>,或在不同 script 标签里重复加载 layui.js。结果是 upload.render() 被执行多次,同一个按钮触发多个上传实例,点一下等于发 N 次请求。

检查方式很简单:

  • 打开 DevTools → Console,输入 layui.upload,看是否报错或返回 undefined
  • 搜索 HTML 源码,确认 layui.js 只出现一次,且没和 layui.all.js 共存
  • 若用构建工具(如 webpack),确保没有重复 import 'layui' 或 require('layui')

禁用按钮只是表层控制,真正的防线在初始化阶段——绑错一次,后面怎么禁都拦不住并发请求。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2723

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5903

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6850

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6598

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

943

5

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

3120

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2933

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1161

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.4万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习