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实现文件上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2018-09-03

layui文件上传实现代码

本文实例为大家分享了layui文件上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传</title> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="st

layui实现文件或图片上传记录

本文为大家分享了layui实现文件或图片上传记录的具体代码,供大家参考,具体内容如下 首先是layui自己的官网关于图片/文件上传的帮助文档: 接下来是我自己的使用记录: 1.首先在js中定义一个全局变量 var uploadListIns; 2.进行赋值 //多文件列表示例 /** * 图片上传 */ layui.use('upload', function(){ var $ = layui.jquery,upload = layui.upload; var demoListView = $(

layui 上传文件_批量导入数据UI的方法

使用layui的文件上传组件,可以方便的弹出文件上传界面. 效果如下: 点击[批量导入]按钮调用js脚本importData(config)就可以实现数据上传到服务器. 脚本: /*** * 批量导入 * config.downUrl 下载模板url * config.uploadUrl 上传文件url * config.msg * config.done 上传结束后执行. */ function importData(config){ var default_config = { msg:"数

layui 实现表单和文件上传一起传到后台的例子

HTML代码 <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">尾灯名称</label> <div class="layui-input-block"> <input type="text" name="na

基于layui数据表格以及传数据的方式

如下所示: 数据表格一: <div style="margin:0px; background-color: white; margin:0 10px;"> <blockquote class="layui-elem-quote"> <div class="layui-btn-group demoTable"> <button class="layui-btn" data-type=&

layui数据表格实现重载数据表格功能(搜索功能)

layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 <table id="demo" lay-filter="test"></table> JavaScript部分 var table = layui.table; //执行渲染 table.render({ elem: '#demo' //指定原始表格元素选择器(推荐id选择器)

Layui数据表格之单元格编辑方式

开发工具与关键技术:VS.layui数据表格之单元格编辑 layui是我们常用的一个插件,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,其中有很多模快,而每个模板又包括很多模板,下面我要讲解的是数据表格中的单元格编辑. 1.在使用layui之前首先确保已经引入了layui的css和js脚本文件. 2.初始化layui模块. layui.use(['table'], function () { //声明一个layuiTable变量作为全局变量.

layui实现显示数据表格、搜索和修改功能示例

本文实例讲述了layui实现显示数据表格.搜索和修改功能.分享给大家供大家参考,具体如下: <div style="text-align: center" id='btn'> <div class="layui-inline"> <input class="layui-input" name="keyword" id="demoReload" autocomplete=&quo

Layui给数据表格动态添加一行并跳转到添加行所在页的方法

Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行

layui使用数据表格实现购物车功能

本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>layui数据表格实现类购物车功能</title> <link rel="stylesheet" type="

Layui数据表格之获取表格中所有的数据方法

数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据. 2.将上一步创建的JS对象数组也就是原始数据赋给table.render()的data参数. 3.获取表格中的所有数据其实直接获取第一步中创建的JS对象数组即可,参照下面的代码,获取表格中的所有数据就是获取tableContent中的数据. // 存放数据表格中的数据的对象数组tableC

EasyUI 数据表格datagrid列自适应内容宽度的实现

项目初期在加载数据表格的时候为了提高表格数据渲染速度,设置了默认宽度. 现需求需要加一个表格自适应的功能,触发改功能,改变列宽度,但是不重新渲染表格,不发生数据请求. 设计思路,遍历每项的所有数据,比较字节符串长度,取最大长度.再用最大长度和标题长度比较,如果标题长就去标题长度,如果字符串长,就取字符串的. js //表格自适应方法 function changeWidth(agstr){ var dg = $('#'+agstr); dg.datagrid("loading");//

Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! 出现的问题: 1.使用 Layui 官方提供的 [转换静态表格] 方式初始化加载时报 id 找不到的错误(自己的锅) 2.传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当

layui数据表格重载实现往后台传参

1.网上的代码: <div class="demoTable"> 搜索商户: <div class="layui-inline"> <input class="layui-input" name="keyword" id="demoReload" autocomplete="off"> </div> <button class=&qu