您的位置：首页 > 编程语言 > Java开发

springmvc+ajax+formdata上传图片代码实例

2019-09-02 14:58 1181 查看

最近工作涉及到了上传图片的情况，在网上看了很多，就着重学习了下。上传文件的方式有多种，这里对使用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");"方式获取，然后进行文件的上传等操作就行了。

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： spring mvc ajax formdata 上传图片

相关文章推荐

新的分享

章节导航