[Layui]上传文件带进度条+表单提交功能优化

厦门德仔

已于 2023-03-24 17:02:06 修改

阅读量993

点赞数

CC 4.0 BY-SA版权

分类专栏： #Layui 文章标签：上传表单提交进度条 layui

于 2022-03-23 12:40:20 首次发布

本文链接：https://blog.youkuaiyun.com/david_520042/article/details/123683075

#Layui 专栏收录该内容

46 篇文章 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在使用Layui时实现文件上传带进度条，并优化表单提交功能，确保在文件上传完成后才提交数据，避免提交空白路径。通过HTML结构、监听函数及上传回调来实现这一流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传文件带进度条+表单提交功能优化

前期做了一个简视频提交；每次只提交一个需要重新上传。视频文件较大时候没有进度提示，用户体验并不好，今天做一个简单的优化！

在这里插入图片描述

如果监听提交表单时候，回调路径可能还未完成。提交空白路径到后台。
故submit 监听不做任何处理，只为actionbind 上传文件接口并加载进度条

1.HTML:

    <form class="layui-form"

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

厦门德仔

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

使用Layui上传文件与表单一起提交

linbomm的博客

11-19

6969

一、html <div class="layui-form-item"> <label class="layui-form-label">ID</label> <div class="layui-input-inline"> <input id="bookId" lay-verify="required" type="t

layui实现文件压缩上传_tp5+layui 实现上传大文件

weixin_39609887的博客

12-29

997

前言：之前所写的文件上传类通常进行考虑的是文件的类型、大小是否符合要求条件。当上传大文件时就要考虑到php的配置和服务器的配置问题。之前简单的觉得只要将php.ini中的表单上传的大小，单脚本执行的最大时间都配大就行了。显然这是很小白吃的做法。这样改完之后页面及服务器还是会崩溃。差不多几百兆这样吧。所以查阅资料，采用将大文件分割上传的方式来解决。这里进行记录下。内容：首先记录下更改文件上传大小...

2 条评论您还未登录，请先登录后发表或查看评论

04-06

Stay Focus

08-27

3万+

最近项目有个需求，要求文件上传有实时进度条，前端框架使用的是layui，但是layui的文件上传(upload)和进度条并没有做结合，这里只能靠改源码的方式实现之，折腾了蛮久，最后还是在公司前端的帮助下完成了，感谢。 1.修改layui文件上传ajax的代码：这里使用的是layui(2.4.3版本)的非模块化（layui.all.js），模块化请修改modules/upload.js ...

Layui表格中文件上传显示进度条

no_delay_su的博客

01-09

7090

layui文件上传显示进度条

使用layui上传文件时显示进度条

学Java的小蜗牛的博客

07-27

2208

一、效果如下二、引入layui 可到layui官网下载 https://www.layui.com/ 三、页面代码四、后台代码后台代码没有写逻辑，自行编写（@RequestMapping 改为自己的即可，注意和前端请求保持一致）五、代码（直接copy即可）引入代码前端 <link rel="stylesheet" href="${pageContext.request.contextPath}/views/static/layui-v2.6.8/layui/css/layu

[demo]layui手动上传多张图片文件预览并限制上传文件数量

02-17

本篇文章将详细讲解如何使用layui实现手动上传多张图片文件的功能，并限制上传文件的数量。首先，我们需要理解layui的file模块。layui的file模块是用于文件上传的核心组件，它集成了多文件选择、预览、上传等功能...

Layui上传文件错误处理：文件上传万无一失的终极攻略

[解决layui上传文件提示上传异常,实际文件已经上传成功的问题](https://img-blog.csdnimg.cn/07f35a664ef04c16b9610d6f29de4d13.png) # 摘要 Layui作为一款流行的前端UI框架，其文件上传功能对于开发交互性网页应用...

Layui文件上传：前端验证与异常提示的优化策略

[解决layui上传文件提示上传异常,实际文件已经上传成功的问题](https://img-blog.csdnimg.cn/2020030500344237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG...

Layui多文件上传进度条

08-11

1054

Layui原生upload模块不支持文件上传进度条显示，百度，谷歌找了一下不太适用。后面找到一个别人修改好的JS，替换上去，修改一下页面显示即可使用，一下是部分代码 HTML: <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="...

layui文件上传带进度条显示.zip

12-17

layui+PHP文件上传，附上传进度条。这是一个DEMO集合，集合了很多JS等DEMO效果，在左侧菜单打开LayUI Demo中看文件上传即可看本资源效果。

springmvc+jquery+layui文件上传进度条

08-28

文件上传效果类似163邮箱。使用了spring MVC作为后台。layui+jquery作为前端技术。支持多文件上传。下载后直接导入myeclipse即可使用。

layui 文件上传进度条

Do_Only的博客

08-15

1896

使用HisiPhPK框架做一个是视频上传的后台，再需要视频上传的页面，我感觉肯定要做视频上传的进度条啊，于是就开始研究这个后台, 这个后台是使用的框架是layui，现成的组件肯定是用着最爽的，百度求真知、互相借鉴学习下面是几个学习的方法链接，学习的方法，不太详细的社区原创，layui 的文件上传知识最后采取一种最简洁的做法共分为三部分第一修改upload.js 源文件，增...

layui表单和文件上传

qq_36463418的博客

07-18

7712

layui表单和文件上传 近期用layui写了一个在表单中上传文件，因为这个表单和文件上传让我费劲了脑汁，因为第一次使用layui所以很多东西摸不清楚，后来查了资料才知道layui文件上传和from表单提交是异步的，分为两次提交，接下来我们详细介绍话不多说，先上代码 html代码： <form class="layui-form" id="userForm" enctype="multip...

layui文件上传结合表单使用

dengz_j的博客

01-21

1855

前端 HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <meta charset="UTF-8"> <title>upl

利用layui+spring boot实现多文件上传并与表单一起提交

我现在难受的一批的博客

06-13

2407

利用layui+spring boot实现多文件上传并与表单一起提交实现思路 文件上传和表单提交是分开进行的。以下以论文申报为例 文件上传部分：建立一个文件表如下图所示，将文件信息存入表中（其中state，fatherid两项初始值都是0，表示还没有关联论文信息），将文件的id值返回给前端，前端将id值赋值给一个隐藏的input的value。（layui的多文件上传是一个一个进行上传的），比如我上传了3个文件，依次返回了3个文件的id值分别是1、2、3，那么input的value值通过字符串的拼接可以变为

layui实现表单数据+文件一起提交

求人不如求己

10-17

1万+

参考博客： https://blog.youkuaiyun.com/weixin_36571185/article/details/78700802 https://www.cnblogs.com/qlqwjy/p/8992956.html

layUI文件上传与form表单一起提交

weixin_41517724的博客

11-07

4682

<!DOCTYPE html> <html> <head> <%--常量--%> <%@ include file="/common/constHead.jsp"%> <%--jQuery--%> <%@ include file="/common/jqueryHead.jsp"...

通过layui框架，实现一起上传图片和表单，图片也可以选文件（纯小白教学）直接粘贴代码就可以用