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

项目背景

最近在做无人机任务下发模块,有一个业务场景,就是要给每一条飞行路径添加具体的路径点,这里选择通过导入excel表的方式来直接添加,路径点信息提前已经在excel表中设置好了。

下面是路径的列表展示,我在数据列表中每一行都放一个文件上传(导入路径点)按钮,点击对应行的按钮上传excel文件,同时传入对应行的路径id,在后台将excel中的路径点数据添加到指定id的路径中。页面设计如下:

layui一个页面使用多个文件上传按钮_第1张图片

问题

在编写代码的过程中,我发现layui的文件上传模块都是在页面加载的时候绑定到一个页面元素上(大部分文件上传插件都是如此),即不可能为上面多个button都绑定一个独立的文件功能。页面初始化时通过以下代码绑定:



问题解决

layui 2.5.0版本新增了对文件上传实例的重载,即能够在第一次render渲染后还能够改变文件上传实例的参数,通过reload方法。下面是layui官网给出的代码:

//创建一个实例
var uploadInst = upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,size: 1024*5 //限定大小
});
 
//重载该实例,支持重载全部基础参数
uploadInst.reload({
  accept: 'images' //只允许上传图片
  ,acceptMime: 'image/*' //只筛选图片
  ,size: 1024*2 //限定大小
}); 

经过思考,其实没有必要为每个按钮都实现一个文件上传功能,因为只要能保证:点击不同路径的上传按钮时,能够更新传入实例的路径id即可(即data参数)。

所以这里我的思路是:

  1. 在页面创建一个隐藏的button,为layui的文件上传按钮。
  2. 为table中的每个“导入路径点”添加onclick事件,当点击时传入对应航的路径id,然后重载文件上传实例,更改传入的参数为当前路径id。

具体代码如下:


你可能感兴趣的:(前端)