SpringBoot+layui实现文件上传功能
作者:蓝胖子的白日梦
Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。这篇文章主要介绍了SpringBoot+layui实现文件上传,需要的朋友可以参考下
什么是spring boot
Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。用我的话来理解,就是spring boot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包,spring boot整合了所有的框架(不知道这样比喻是否合适)。
页面代码(只需要引入基础layui的css与js)
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>多文件列表上传</legend> </fieldset> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr><th>文件名</th> <th>大小</th> <th>状态</th> <th>操作</th> </tr></thead> <tbody id="demoList"></tbody> </table> </div> <button type="button" class="layui-btn" id="testListAction">开始上传</button> </div>
JS
layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; //多文件列表示例 var demoListView = $('#demoList') ,uploadListIns = upload.render({ elem: '#testList' ,url: 'upload/uploadFile' ,accept: 'file' ,multiple: true ,auto: false ,size: 5120 ,bindAction: '#testListAction' ,choose: function(obj){ var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 //读取本地文件 obj.preview(function(index, file, result){ var tr = $(['<tr id="upload-'+ index +'">' ,'<td>'+ file.name +'</td>' ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>' ,'<td>等待上传</td>' ,'<td>' ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>' ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>' ,'</td>' ,'</tr>'].join('')); //单个重传 tr.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); //删除 tr.find('.demo-delete').on('click', function(){ delete files[index]; //删除对应的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选 }); demoListView.append(tr); }); } ,done: function(res, index, upload){ if(res.code == 0){ //上传成功 var tr = demoListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); tds.eq(3).html(''); //清空操作 return delete this.files[index]; //删除文件队列已经上传成功的文件 } this.error(index, upload); } ,error: function(index, upload){ var tr = demoListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }); });
后台接收
public final static String UPLOAD_FILE_PATH = "D:\\uploadFile\\"; @RequestMapping(value = "uploadFile") public String uploadImage(@RequestParam("file") MultipartFile file) { if (!file.isEmpty()) { Map<String, String> resObj = new HashMap<>(MAP_SIZE); try { BufferedOutputStream out = new BufferedOutputStream( new FileOutputStream(new File(UPLOAD_FILE_PATH, file.getOriginalFilename()))); out.write(file.getBytes()); out.flush(); out.close(); } catch (IOException e) { resObj.put("msg", "error"); resObj.put("code", "1"); return JSONObject.toJSONString(resObj); } resObj.put("msg", "ok"); resObj.put("code", "0"); return JSONObject.toJSONString(resObj); } else { return null; } }
总结
以上所述是小编给大家介绍的SpringBoot+layui实现文件上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!