溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

springmvc+ajax+formdata如何實(shí)現(xiàn)上傳圖片

發(fā)布時(shí)間:2021-06-30 15:36:47 來源:億速云 閱讀:113 作者:小新 欄目:編程語言

這篇文章主要介紹springmvc+ajax+formdata如何實(shí)現(xiàn)上傳圖片,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

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,用來存放表單中的內(nèi)容,"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表單中的所有空間內(nèi)容,文件可以通過"List<MultipartFile> filelist = multipartRequest.getFiles("pic");"方式獲取,然后進(jìn)行文件的上傳等操作就行了。

以上是“springmvc+ajax+formdata如何實(shí)現(xiàn)上傳圖片”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI