1.首先在前端js页面有一个函数:
function xmlUpload(id){ layer.open({ type : 2, title : '上传', maxmin : true, shadeClose : false, // 点击遮罩关闭层 area : [ '600px', '300px' ], content : '/dim/dimFault/import/'+id // iframe的url }); }
<了解Layui.layer这个弹层组件>
2:跳转到controller层中执行方法:
/** * xml故障上传 */ @GetMapping("/import/{id}") @RequiresPermissions("dim:dimFault:import") String importHtml(@PathVariable("id") String id,Model model){ model.addAttribute("id", id); return "dim/dimFault/import"; }
3:根据方法中的返回类型,跳转到html中去
<!DOCTYPE html> <html> <meta charset="utf-8"> <head th:include="include :: header"></head> <body class="gray-bg"> <div class="wrapper wrapper-content "> <div class="row"> <div class="col-sm-12"> <div class="ibox float-e-margins"> <div class="ibox-content"> <form class="form-horizontal m-t" id="signupForm" enctype="multipart/form-data"> <div class="form-group"> <label class="col-sm-3 control-label">文件:</label> <div class="col-sm-8"> <input id="file" name="file" class="form-control" type="file"> </div> </div> <input id="id" name="id" th:value="${id}" class="form-control" type="hidden"> <div class="form-group"> <div class="col-sm-8 col-sm-offset-3"> <button type="submit" class="btn btn-primary" id="commitButton">提交</button> </div> </div> </form> </div> </div> </div> </div> </div> <div th:include="include::footer"></div> <link href="/css/layui.css" rel="stylesheet"> <script src="/js/layui.js"></script> <script type="text/javascript" src="/js/appjs/dim/dimFault/import.js"> </script> </body> </html>
4:则会有相对应的js页面:
$().ready(function () { validateRule(); }); $.validator.setDefaults({ submitHandler: function () { save();//设置默认方法 ajax } }); layui.use('upload', function () { var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#file', //绑定元素 url: '/common/sysFile/faultImport', //上传接口 size: 20000, auto: false, accept: 'file', exts:"xml", bindAction: '#commitButton', done: function (r) {//上传完毕回调 $.ajax({ cache : true, type : "POST", url : "/dim/dimProtocol/updateProtocolId", data : { protocolId:$("#id").val() },// 你的formid async : false, error : function(request) { parent.layer.alert("Connection error"); }, success : function(data) { if (data.code == 0) { parent.layer.msg("操作成功"); parent.reLoad(); var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引 parent.layer.close(index); } else { parent.layer.alert(data.msg) } } }); }, error: function (r) { } }); }); function validateRule() { var icon = "<i class='fa fa-times-circle'></i> "; $("#signupForm").validate({ rules: { name: { required: true } }, messages: { name: { required: icon + "请输入姓名" } } }) } function save() { }
<里面的参数字段具体参照jQuery和Layui>
<一般一个请求包含:请求前的验证,请求的传输,请求的关闭>
5:在执行实例中有上传接口url
/故障明细解析 @ResponseBody @PostMapping("/faultImport") R faultImport(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws MalformedURLException { String fileName = file.getOriginalFilename(); fileName = fileName.substring(0,fileName.lastIndexOf("."))+System.currentTimeMillis()+fileName.substring(fileName.lastIndexOf("."),fileName.length()); SAXReader reader = new SAXReader(); try { FileUtil.uploadFile(file.getBytes(), bootdoConfig.getUploadPath()+"xml/", fileName); //删除9999协议 dimFaultService.deleteByProtocolId(9999); // 通过reader对象的read方法加载books.xml文件,获取docuemnt对象。 Document document = reader.read(new File(bootdoConfig.getUploadPath()+"xml/"+fileName)); // 通过document对象获取根节点faultStore Element faultStore = document.getRootElement(); // 通过element对象的elementIterator方法获取迭代器 Iterator it = faultStore.elementIterator(); while (it.hasNext()) { Element fault = (Element) it.next(); //解析子节点的信息 Iterator itt = fault.elementIterator(); while (itt.hasNext()) { Element faultChild = (Element) itt.next(); if("Fault".equals(faultChild.getName())){ List list = faultChild.attributes(); DimFaultDO dimFault = new DimFaultDO(); for(int i=0;i<list.size();i++){ Attribute item = (Attribute)list.get(i); if(i==0){ dimFault.setFaultCode(item.getValue()); }else if(i==1){ dimFault.setFaultPortno(item.getValue()); }else if(i==2){ dimFault.setFaultPorttype(item.getValue()); }else if(i==3){ dimFault.setFaultBitoffset(item.getValue()); }else if(i==4){ dimFault.setFaultName(item.getValue()); }else if(i==5){ dimFault.setFaultSystem(item.getValue()); }else if(i==7){ dimFault.setFaultDesc(item.getValue()); }else if(i==8){ dimFault.setFaultDeal(item.getValue()); } dimFault.setProtocolId("9999"); } dimFaultService.save(dimFault); } } } } catch (Exception e) { return R.error(); } return R.ok(); }里面的内容为解析xml文件的内容并传输到相对应的数据库中,其中的逻辑让我明天好好研究下