<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>狀態(tài)</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(); //將每次選擇的文件追加到文件隊(duì)列   //讀取本地文件   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(''));    //單個(gè)重傳    tr.find('.demo-reload').on('click', function(){     obj.upload(index, file);    });    //刪除    tr.find('.demo-delete').on('click', function(){     delete files[index]; //刪除對應(yīng)的文件     tr.remove();     uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現(xiàn)同名文件不可選    });    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]; //刪除文件隊(duì)列已經(jīng)上傳成功的文件   }   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;    }  }