springmvc+ajax+formdata上傳圖片代碼實(shí)例
最近工作涉及到了上傳圖片的情況,在網(wǎng)上看了很多,就著重學(xué)習(xí)了下。上傳文件的方式有多種,這里對使用FormData的方式進(jìn)行說明。
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ù)據(jù)。
如果要一次選擇多個文件,可以在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
}
});
}
先創(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)行文件的上傳等操作就行了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 利用 FormData 對象和 Spring MVC 配合實(shí)現(xiàn)Ajax文件下載功能
- SpringMVC中使用bean來接收form表單提交的參數(shù)時的注意點(diǎn)
- springmvc利用jquery.form插件異步上傳文件示例
- SpringMVC處理Form表單實(shí)例
- springMVC結(jié)合AjaxForm上傳文件
- jquery.form.js框架實(shí)現(xiàn)文件上傳功能案例解析(springmvc)
- 使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能
- SpringMVC form標(biāo)簽引入及使用方法
相關(guān)文章
Gradle環(huán)境下導(dǎo)出Swagger為PDF的步驟詳解
這篇文章主要介紹了Gradle環(huán)境下導(dǎo)出Swagger為PDF的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Mybatis返回map集合時,列的順序與select不一致問題
這篇文章主要介紹了Mybatis返回map集合時,列的順序與select不一致問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-01-01
java為什么會出現(xiàn)精度丟失這種現(xiàn)象你知道嗎
這篇文章主要介紹了Java精度丟失的問題,幫助大家更好的理解和使用Java,感興趣的朋友可以了解下,希望能夠給你帶來幫助2021-08-08

