快捷導(dǎo)航

springmvc+ajax+formdata上傳圖片代碼實(shí)例

更新時(shí)間：2019年09月02日 14:58:30 作者：厭世閻羅

這篇文章主要介紹了springmvc+ajax+formdata上傳圖片代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

最近工作涉及到了上傳圖片的情況，在網(wǎng)上看了很多，就著重學(xué)習(xí)了下。上傳文件的方式有多種，這里對(duì)使用FormData的方式進(jìn)行說(shuō)明。

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

<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，這樣才能在提交表單的時(shí)候傳遞文件數(shù)據(jù)。

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

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
    }
  });
}

先創(chuàng)建formData，用來(lái)存放表單中的內(nèi)容，"fileForm"為jsp頁(yè)面中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表單中的所有空間內(nèi)容，文件可以通過(guò)"List<MultipartFile> filelist = multipartRequest.getFiles("pic");"方式獲取，然后進(jìn)行文件的上傳等操作就行了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: