springmvc+ajax+formdata如何實現上傳圖片

這篇文章主要介紹springmvc+ajax+formdata如何實現上傳圖片，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1、springmvc項目想要上傳文件，需要使用multipart方式，所以在spring-mvc.xml配置文件中需要增加multipart相關配置，代碼如下

<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- one of the properties available; the maximum file size in bytes -->
    <property name="maxUploadSize" value="50000000"/>
  </bean>

2、jsp代碼

<form action="picUpload" method="post" enctype="multipart/form-data" id="fileForm">
  <input type="file" id="pic" name="pic" multiple><br><br>　　
  <input type="text" id="id" name="id"><br><br>
  <input type="text" id="name" name="name"><br><br>
  <input type="button" value="上傳" onclick="morePicUpload()"> </form>

需要注意的是，form 的 enctype 值必須為 multipart/form-data，這樣才能在提交表單的時候傳遞文件數據。

如果要一次選擇多個文件，可以在file表單添加"multiple",這樣在選擇文件時可以一次選擇多個文件。

3、js代碼

function morePicUpload(){
  var formData = new FormData(document.getElementById("fileForm"));
  alert(0);
  $.ajax({
    url : basePath+"morePicUpload",
    type : "post",
    data :formData,
    async : false,
    cache : false,　　　　　dataType : "json",
    contentType : false,
    processData : false,
    success : function(data){
      //code
    }
  });
}

先創建formData，用來存放表單中的內容，"fileForm"為jsp頁面中form的id。

4、最后的是controller，代碼如下

@RequestMapping("/morePicUpload")
  @ResponseBody
  public ResultTo morePicUpload(HttpServletRequest request){    
    ResultTo resultTo = new ResultTo();
    resultTo.setData("");    
    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        
    String id = multipartRequest.getParameter("id");
    String name = multipartRequest.getParameter("name");
    System.out.println(id);
    System.out.println(name);    
    List<MultipartFile> filelist = multipartRequest.getFiles("pic");
    for(MultipartFile file:filelist){
      if(!file.isEmpty()){
        System.out.println(file.getOriginalFilename());
      }
    }
    return resultTo;
  }

使用"MultipartHttpServletRequest"可以獲取form表單中的所有空間內容，文件可以通過"List<MultipartFile> filelist = multipartRequest.getFiles("pic");"方式獲取，然后進行文件的上傳等操作就行了。

以上是“springmvc+ajax+formdata如何實現上傳圖片”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！