Layui数据表格嵌套文件上传按钮,根据行数据id上传文件
- 页面
<table class="layui-hide" id="NoticeInfoTable" lay-filter="test"></table>
- JS初始化并渲染成文件上传按钮
table = layui.table //表格 table.render({ elem: '#NoticeInfoTable' , height: 'full-200' , url: '/allFiles/viewlist' //数据接口 , title: '表信息' , id: 'NoticeInfoTable' , page: true //开启分页 , cols: [[ //表头 {field: 'odd_numbers', title: '单号', width: 100, sort: true, fixed: 'left'} , {field: 'name', title: '文件名称', width: 480} , {field: 'type', title: '产品类型', width: 90, totalRow: true} , {field: 'batch_information', width: 100, title: '批次信息'} , {field: 'customer_provinces', width: 70, title: '省份', totalRow: true} , {field: 'upload_time', width: 110, title: '上传时间'} , {field: 'change_to_number', width: 120, title: '更改通知单号', totalRow: true} , {field: 'upload', fixed: 'right', width: 120, title: '操作', align: 'center' , templet: function(d){//这里的参数d是templete的固定用法,可以取到该行的所有数据 if (d.file_state == 0){//未上传 //class里的upload_btn是用来标志上传按钮的,没有定义实际的css样式 return '<button class="layui-btn layui-btn-primary layui-btn-xs upload_btn" value="'+d.odd_numbers+'">上传</button>'; }else { //已上传||被替换 return '<button class="layui-btn layui-btn-xs replace_btn" value="'+d.odd_numbers+'">替换</button>' + '<button class="layui-btn layui-btn-danger layui-btn-xs delete_btn" lay-event="delete" value="'+d.odd_numbers+'">删除</button>'; //删除按钮不需要渲染上传,只是一个动作按钮,可以通过lay-event进行行事件监听 } } } ]] , done: function(res, curr, count){//表格加载完成后,对上传按钮进行渲染 var tableId = this.id; var tableElem = this.elem; //table render出来实际显示的table组件 var tableViewElem = tableElem.next(); //渲染当前页面的所有upload组件 upload.render({ elem: tableViewElem.find('.upload_btn') ,url: '/allFiles/uploadFile' ,accept: 'file' ,before: function(obj){ //obj包含信息,跟choose回调完全一致。在传值之前先获取id var tableElem = this.item; uploadParam = tableElem.attr('value'); layer.load(); //上传loading } ,data: { odd_number: function () {//data中写值的时候,要用动态获取的方式,即写个function的方式,不然直接写获取不到相应的值。 return uploadParam; } } ,done: function (res) { layer.closeAll('loading'); //关闭loading layer.msg('上传成功'); } ,error: function(index, upload){ layer.closeAll('loading'); //关闭loading layer.msg('上传失败,请重试'); } }); } }); //删除操作 table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值 if (layEvent === 'delete') { layer.open({ title: '提示' ,content: '此操作不可撤销,确认删除?' ,closeBtn: 0 ,icon: 3 ,time: 0 //不自动关闭 ,btn: ['确定','取消'] ,btnAlign: 'c' ,yes: function(index){ layer.close(index); layer.load(); //向服务端发送删除指令 $.ajax({ url: '/allFiles/deleteFile' ,data:{ odd_number: data.odd_numbers } ,success: function (data) { layer.closeAll('loading'); layer.msg('删除成功'); } ,error: function (data){ layer.closeAll('loading'); layer.msg('删除失败,请重试!',function () {}); } }); } }); } });
- 后台
//上传 @RequestMapping("/uploadFile") @ResponseBody public void uploadFile(@RequestParam("file")MultipartFile multipartFile, String odd_number){ if(multipartFile == null || odd_number == null || "".equals(odd_number)){ return; } //上传文件 String fileName = multipartFile.getOriginalFilename(); //获取文件名,带后缀 String path = "/H:/mmmm/" + odd_number +"/"; //文件夹路径 File folderPath = new File(path); if (!folderPath.exists() && !folderPath.isDirectory()){//查询文件夹是否存在 folderPath.mkdir();//建立一级子目录 //folderPath.mkdirs();//建立多级子目录 System.out.println("目录不存在,创建新文件夹"); } File filePath = new File(path + fileName); try{ multipartFile.transferTo(filePath);//将上传的文件写到服务器上指定的文件路径 System.out.println("上传成功!"); } catch (IOException e) { e.printStackTrace(); } } //删除 @Override @Transactional public void replaceFile(MultipartFile multipartFile, String odd_number) { String fileName = multipartFile.getOriginalFilename();//文件名 String path = ""; path = "D:/test/" + fileName; File file = new File(path); if (file.exists()){ if (file.delete()){ System.out.println("删除成功"); }else{ System.out.println("删除失败"); } }else { System.out.println("文件不存在"); } }