SpringBoot+layui实现文件上传功能

<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>

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 ;

    }

  }