Spring MVC中如何实现使用FormData上传图片的Ajax代码示例？

本文共计909个文字，预计阅读时间需要4分钟。

最近工作涉及到上传图片的情况，在网上看了很多，便自学了一下。上传文件的方式有很多种，这里对使用FormData的方式进行说明。

在Spring MVC项目中，若想上传文件，需要使用multipart方式进行。以下是使用FormData上传文件的基本步骤：

1. 在Spring MVC的Controller中，添加一个方法来处理文件上传请求。

2.在该方法中，使用MultipartFile类型的参数接收上传的文件。

3.使用FileUpload类对上传的文件进行处理，如保存到服务器等。

以下是一个简单的示例代码：

java

import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.multipart.MultipartFile;

import java.io.File;import java.io.IOException;

@Controller@RequestMapping(/upload)public class FileUploadController {

@PostMapping(/file) public String uploadFile(@RequestParam(file) MultipartFile file) { // 判断文件是否为空 if (file.isEmpty()) { return 文件不能为空; }

// 获取文件名 String fileName=file.getOriginalFilename();

// 创建文件对象 File dest=new File(D:/upload/ + fileName);

try { // 保存文件 file.transferTo(dest); return 文件上传成功; } catch (IOException e) { e.printStackTrace(); return 文件上传失败; } }}

在上面的代码中，我们创建了一个名为`FileUploadController`的控制器，其中包含一个名为`uploadFile`的方法，用于处理文件上传请求。该方法接收一个`MultipartFile`类型的参数，该参数代表上传的文件。我们首先判断文件是否为空，然后获取文件名，并创建一个`File`对象。最后，使用`file.transferTo(dest)`方法将文件保存到服务器上。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。