layui一个页面使用多个文件upload上传按钮

qq_38291796

已于 2022-09-02 17:59:54 修改

阅读量6.1k

点赞数 2

文章标签： jquery html 前端 javascript html5

于 2020-05-06 18:08:57 首次发布

本文链接：https://blog.csdn.net/qq_38291796/article/details/105955756

版权

最近在功能时遇到一个问题，要给项目中每一个产品添加详细的（pdf,docx,xlsx,doc,xls）资料。

下面是产品的列表展示，数据是循环出来的,我在数据列表中每一行都放一个文件上传按钮，点击对应行的按钮上传文件，同时传入对应行的产品id，在后台将上传后的文件路径添加到对应的产品中。

layui的文件上传模块都是在页面加载的时候绑定到一个页面元素上，即不可能为上面多个按钮都绑定一个独立的文件功能。

解决方法：

HTML代码
在这里插入图片描述

为每一个按钮添加lay-data属性。
JS代码
在这里插入图片描述

在before回调函数中获取lay-date中的id数据,在把id添加到data传递给后端
后端代码：
后端框架Thinkphp5
在这里插入图片描述

案例下载地址

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_38291796

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

使用LayUI进行文件上传(多文件上传)

一直梨花压海棠

08-15

7056

使用LayUI进行文件上传(多文件上传) 1、添加LayUI上传组件需要的js文件 jquery.min.js、layui.all.js、layer.js 2、导入Java上传组件包 commons-fileupload、commons-io 3、在spring中配置上传文件大小限制 <!-- 设置上传文件最大值 1M=1*1024*1024(B)=1048576 bytes --&...

SpringBoot+layui实现文件上传功能

08-27

在文件上传过程中，layui提供了一个`layui-upload-list`区域来显示文件的状态，如文件名、大小和上传进度。同时，提供了重传和删除文件的功能。总结来说，Spring Boot结合layui，可以通过以下步骤实现文件上传功能...

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

layui一个页面使用多个文件上传按钮

奋进的小白粥

02-18

1万+

啊啊啊

layui在表格中嵌入上传按钮，并修改上传进度条

最新发布

weixin_50645221的博客

06-29

570

当需要在表格中添加上传文件按钮，并不需要弹出填写表单的框的时候，需要在layui中，用按钮触发文件选择有一点需要说明的是，layui定义table并不是在定义的标签中渲染，而是在紧接着的标签中渲染，所以要获取实例，要用next()也可以通过this或者css选择器来获取实例。

layui 表单上传文件同一个页面多个上传控件

sinat_36279113的博客

03-31

4417

问题描述：当一个html文件中存在多个上传控件，例如：既要上传文件，又要上传图片，此时怎么使用layui.upload ？解决办法：修改layui.upload中field参数，如下：（具体见js部分图片上传代码中） html页面元素 <div class="layui-form-item"> <label class="layui-form-label"&...

layui 多个上传控件，前端预览+非自动上传方式实现

weixin_40293364的博客

12-08

1204

layui 上传控件非自动上传只能实现一个或的多个图片同时在一个上传控件中实现，并传回到controller处理上传结果若需要多个上传控件上传图片，提交时再分别获取图片信息如何处理呢？ ---经过测试可以采用ajax提交的方式实现具体实现过程如下： <div class="layui-form-item"> <label class="layui-form-label">按钮图标:</label> &l

tp5使用layui实现多个图片上传（带附件选择）

天龙的博客

10-25

1204

tp5使用layui实现多个图片上传（带附件选择），如何加载layui在此不详细说明，有需要可以百度 html代码，主要处理都是在jq中，完成方法全部原创，也许不是最简单的，但也能实现效果 {include file="public/header" /} <body> <div class="x-nav"> <span class="layui-breadcrumb"> <a href="">首页</a&g.

layui(1.0.9)文件上传upload,前后端的实例代码

10-16

首先，需要明确的是，在Layui中使用文件上传，需要引入Layui相关的资源包。从前端代码可以看出，通常通过添加一个类型为file的input元素，并赋予特定的lay-type属性来指定使用Layui的文件上传组件。在input元素上，...

解决layui页面按钮点击无反应,也不报错的问题

10-16

总结来说，解决layui页面按钮点击无反应的问题，需要从资源加载、样式定义、事件绑定、代码审查、异步处理、兼容性检查等多个方面进行排查和修复。这不仅需要开发者对layui框架有深入的理解，还需要具备良好的问题...

使用layui实现多文件列表上传

12-28

该代码完整的实现了shiyonglayui技术实现多文件的上传预览和删除功能，下载下来直接导入到开发工具中就可以使用

layui（多个上传按钮）文件上传获取点击按钮对象

亮大大的博客

01-07

5050

var upload = layui.upload; $('.importCase').each(function(){ var btn = $(this); //点击按钮对象 upload.render({ elem: this, url: 'url', accept: 'file', //普通文件 data:{...

layui-多个文件同时上传

热门推荐

iFlyingCoder的博客

09-28

1万+

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadFiles.aspx.cs" Inherits="TCIQDOA.FilesManager.View.UploadFiles" %> <!DOCTYPE html> <html xmlns="http://www.w3.

layui 上传文件有多个上传字段时处理方法

萧然如尘

06-21

477

layui 上传文件

layui多文件上传

cainiaonixi的博客

09-03

3173

效果图：页面的编写（注意：引入layui相关的css）： &lt;body class="childrenBody"&gt; &lt;div class="layui-upload"&gt; &lt;button type="button" class=" layui-btn layui-

layui：多文件上传

Liubingzhe

02-10

1952

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>layui-文件

layui多中类型多个附件上传实现

qq_36254571的博客

09-12

2520

首先看效果图上传之后效果修改页面附件上传删除等功能请看下边代码实现，新增页面 <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header"><strong>原文上传</strong>(只可上传五个原文，支持常用文件格式) </div> ...

layui的多文件列表上传功能前端代码

weixin_30478619的博客

03-22

601

html页面的代码（注意：引入layui相关的css）： <div class="layui-upload" style="margin-left: 130px"> <button type="button" class=" layui-btn" id="choiceList"><i class="iconfont icon-e645"...

layUI实现多文件上传

stubborn的博客

06-07

2259

前端： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layPage快速使用</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=

layui多个file与提交同时进行_layui.upload实现文件上传控制

06-01

您好，关于多个文件上传和提交同时进行的控制，可以使用 layui.upload 的 before 函数来实现。示例代码如下： ``` layui.use('upload', function(){ var upload = layui.upload; //多文件列表示例 var ...