多文件列表上傳
 

 選擇多文件 
 
  
   
    文件名
    大小
    狀態(tài)
    操作
   
   
  
 

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(); //將每次選擇的文件追加到文件隊(duì)列
   //讀取本地文件
   obj.preview(function(index, file, result){
    var tr = $([''
     ,''+ file.name +''
     ,''+ (file.size/1014).toFixed(1) +'kb'
     ,'等待上傳'
     ,''
      ,'重傳'
      ,'刪除'
     ,''
    ,''].join(''));
    //單個(gè)重傳
    tr.find('.demo-reload').on('click', function(){
     obj.upload(index, file);
    });
    //刪除
    tr.find('.demo-delete').on('click', function(){
     delete files[index]; //刪除對(duì)應(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('上傳成功');
    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('上傳失敗');
   tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
  }
 });
});

后臺(tái)接收

 public final static String UPLOAD_FILE_PATH = "D:\\uploadFile\\";
  @RequestMapping(value = "uploadFile")
  public String uploadImage(@RequestParam("file") MultipartFile file) {
    if (!file.isEmpty()) {
      Map 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一種全新的編程規(guī)范，其設(shè)計(jì)目的是用來簡(jiǎn)化新Spring應(yīng)用的初始搭建以及開發(fā)過程，SpringBoot也是一個(gè)服務(wù)于框架的框架，服務(wù)范圍是簡(jiǎn)化配置文件。

以上就是如何在SpringBoot中使用layui上傳文件，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。