现在的位置: 首页 > 编程语言 > 正文

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

2020年02月14日 编程语言 ⁄ 共 1964字 ⁄ 字号 评论关闭

最近工作涉及到了上传图片的情况,在网上看了很多,就着重学习了下。上传文件的方式有多种,这里对使用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上传图片代码实例

以上就上有关springmvc+ajax+formdata上传图片代码实例的相关介绍,要了解更多springmvc,ajax,formdata,上传图片内容请登录学步园。

抱歉!评论已关闭.