1. 程式人生 > >Spring mvc上傳檔案

Spring mvc上傳檔案

  1. SpringMVC+表單實現檔案上傳

前端程式碼:

<form action="userHead" method="post" enctype="multipart/form-data" >

 <input type="file" id="upload" name="upload"/> 

<input type="submit" value="up" onclick="imgupload()">

</form>

伺服器端

@Controller

public class FileController {

         /**

          * 頭像上傳

          * @param req

          * @param files

          * @return2018年9月12日

          */

         @RequestMapping(value="/userHead")

public String uptx(HttpServletRequest req,@RequestParam(value="upload") MultipartFile file) {

                  HttpSession session=req.getSession();

                  User user=(User) session.getAttribute("user");//獲取使用者資料

                  String abpath="upload/tx/"+user.getPhone()+"/";//構建儲存相對路徑

                  String path=req.getServletContext().getRealPath(abpath);//獲取絕對路徑

                  String filename=file.getOriginalFilename();//獲取檔名

                  File thisfile=new File(path,filename);

                  if(!thisfile.exists()) {

                          thisfile.mkdirs();

                  }

                  try {

                          file.transferTo(thisfile);

                  } catch (IllegalStateException e) {

                          // TODO Auto-generated catch block

                          e.printStackTrace();

                  } catch (IOException e) {

                          // TODO Auto-generated catch block

                          e.printStackTrace();

                  }

                  Return “home”;

         }

}

利用表單上傳圖片到伺服器端 用於前端介面為jsp頁面的情況,利用model即可向jsp頁面返回訊息

         @RequestMapping(value="/userHead")      

public String uptx

(HttpServletRequest req,@RequestParam(value="upload") MultipartFile file)

控制器為userHead;

HttpServletRequest req此引數用於下面獲取session中的資料

@RequestParam(value="upload") MultipartFile file

‘MultipartFile 封裝了上載檔案的所有資訊

@RequestParam是對於方法引數的註解,將表單中對應key的值注入引數bean

                  HttpSession session=req.getSession();

                  User user=(User) session.getAttribute("user");//獲取使用者資料

String abpath="upload/tx/"+user.getPhone()+"/";//構建儲存相對路徑

                  String path=req.getServletContext().getRealPath(abpath);//獲取絕對路徑

String filename=file.getOriginalFilename();//獲取檔名

File thisfile=new File(path,filename);

                  if(!thisfile.exists()) {

                          thisfile.mkdirs();

                  }

構建檔案路徑 如果資料夾不存在 就建立檔案

Abpath為相對路徑,再前端 我們使用域名+檔案在伺服器端的相對路徑來讀取圖片資源

file.transferTo(thisfile);

呼叫multipartFile物件的transferTo()方法把檔案存入對應的檔案

SPringMVC+ajax實現檔案上傳

常用於移動端和伺服器端的互動,非同步上傳檔案

以下程式碼使用ajax上傳檔案成功後將檔案資源返回客戶端

Html

<img alt="頭像" src="#" id="txs" style="width:100px;height:100px">

                                   <form action="userHead" method="post" >

                                <input type="file" id="upload" name="upload"/> 

                                <input type="button" value="up" onclick="imgupload()">

                                   </form>

Ajax

function imgupload(){

   var formData=new FormData();

   formData.append("upload",$("#upload")[0].files[0]);

    $.ajax({ 

         url: 'userHead'

         type: 'POST'

         data: formData, 

         async: true

         cache: false

         contentType: false

         processData: false,

         success: function (returndata) { 

           $("#txs").attr("src",returndata)

         }, 

         error: function (returndata) { 

             alert(returndata); 

         } 

    }); 

}

Ajax使用FormData物件模擬表單物件上傳

所以我們取出一個file物件

把它以鍵值對的形式新增到formData物件中

上載到伺服器端

SpringMVC

@Controller

public class FileController {

   /**

    * 頭像上傳

    * @param req

    * @param files

    * @return2018912

    */

   @RequestMapping(value="/userHead")//,consumes = "multipart/form-data"

   @ResponseBody

   public String uptx(HttpServletRequest req,@RequestParam(value="upload") MultipartFile file) {

      HttpSession session=req.getSession();

      User user=(User) session.getAttribute("user");//獲取使用者資料

      String abpath="upload/tx/"+user.getPhone()+"/";//構建儲存相對路徑

      String path=req.getServletContext().getRealPath(abpath);//獲取絕對路徑

      String filename=file.getOriginalFilename();//獲取檔名

      File thisfile=new File(path,filename);

      if(!thisfile.exists()) {

          thisfile.mkdirs();

      }

      try {

          file.transferTo(thisfile);

      } catch (IllegalStateException e) {

          // TODO Auto-generated catch block

          e.printStackTrace();

      } catch (IOException e) {

          // TODO Auto-generated catch block

          e.printStackTrace();

      }

      return abpath+filename;

   }

}