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

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

 下面是产品的列表展示,数据是循环出来的,我在数据列表中每一行都放一个文件上传按钮,点击对应行的按钮上传文件,同时传入对应行的产品id,在后台将上传后的文件路径添加到对应的产品中。
layui一个页面使用多个文件upload上传按钮_第1张图片

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

解决方法:

HTML代码
layui一个页面使用多个文件upload上传按钮_第2张图片

为每一个按钮添加lay-data属性。
JS代码
layui一个页面使用多个文件upload上传按钮_第3张图片

在before回调函数中获取lay-date中的id数据,在把id添加到data传递给后端
后端代码:
后端框架Thinkphp5
layui一个页面使用多个文件upload上传按钮_第4张图片

你可能感兴趣的:(layui一个页面使用多个文件upload上传按钮)