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

前端 专栏收录该内容
12 篇文章 0 订阅

项目背景

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

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

问题

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

<button type="button" class="layui-btn" id="test1">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>

<script>
layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>

问题解决

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。

具体代码如下:

<button type="button" id="importModel" class="layui-hide">导入路径点</button>
<table id="pathList" lay-filter="table"></table>

<script type="text/javascript">
    var uploadInst;                        // 实例全局引用

    layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#pathList'
                ,url: '${baseUrl}/path/pathList' //数据接口
                ,method: 'post'
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:'6%' ,sort: true, fixed: 'left'}
                    ,{field: 'name', title: '路径名称',width:'21%'}
                    ,{field: 'autoFlightSpeed', title: '飞行速度', width:'10%', sort: true}
                    ,{field: 'isSetWaypoint', title: '已分配路径点', width:'13%'}
                    ,{field: 'finishedActionName', title: '完成后动作', width:'15%'}
                    ,{field: 'updateTime', title: '修改时间', width: '15%', sort: true}
                    ,{field: '操作', title: '操作', width: '20%',templet: function(d){
                        var commonOperations = '<button type="button" class="layui-btn layui-btn-xs">编辑</a>'+
                                '<button type="button" class="layui-btn layui-btn-xs">删除</button>';
                        if (d.isSetWaypoint == 0){
                            return commonOperations +
                                '<button type="button" class="layui-btn layui-btn-xs" onclick=importWaypointModel("'+d.id+'")>导入路径点</button>';
                        }else{
                            return commonOperations +
                                '<button type="button" class="layui-btn layui-btn-xs">查看路径点</a>';
                        }
                    }}
                ]]
            });

        });

    layui.use('upload', function(){
            var upload = layui.upload;

            //执行实例
            uploadInst= upload.render({
                elem: '#importModel' //绑定元素
                ,url: '${baseUrl}/path/importWaypointModel' //上传接口
                ,methd: 'post'
                ,accept: 'file'
                ,exts: 'xls|xlsx'
                ,done: function(res){
                    //上传完毕回调
                    responseStrategy2(res,1,"${baseUrl}/path/pathList");
                }
                ,error: function(){
                    layer.alert("导入中出现错误,请重新尝试!");
                }
            });
        });

    function importWaypointModel(pathId) {
        //重载该实例,支持重载全部基础参数
        uploadInst.reload({
            data:{pathId:pathId}
        });
        $("#importModel").click();
    }

 

 

  • 4
    点赞
  • 8
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值