ajax formdata java_使用FormData进行Ajax请求上传文件到controller层的实现

本文详细介绍了如何在Spring MVC中实现文件上传功能,并展示了两种情况:单纯文件上传及带参数上传。包括HTML页面交互、FormData使用、Controller处理和错误处理等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求背景:

页面上传一个文件到controller层,然后后台对文件进行处理。文件类型不限。

第一种:单纯的上传文件

页面功能展现:

8277523da5c80f622c84316d4f1e5794.png

第一步:首先需要两个jar

commons-fileupload-1.3.2.jar

commons-io-2.4.jar

版本不限:

pom文件中相应两个jar:

commons-io

commons-io

2.4

commons-fileupload

commons-fileupload

1.3

commons-iocommons-io2.4commons-fileuploadcommons-fileupload1.3

第二步:在spring-mvc.xml中配置

class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

第三步:jsp页面代码

HTML>

数据生成

选择一个文件:

function uploadFiles(){

//  var uploadFile= $(‘#excelFile‘).get(0).files[0];

var uploadFile = new FormData($("#file")[0]);

console.log(uploadFile);

if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != ""){

$.ajax({

url:‘/manage/fileupload/upload‘,

type:‘POST‘,

data:uploadFile,

async: false,

cache: false,

contentType: false, //不设置内容类型

processData: false, //不处理数据

success:function(data){

console.log(data);

alert(data.msg);

},

error:function(){

alert("上传失败!");

}

})

}else {

alert("选择的文件无效!请重新选择");

}

}

数据生成
    

选择一个文件:

         
有关于FormData可参考此链接:

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objectshttps://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

第四步:controller层代码

packagecom.bigaoread.platform.web.manage.fileupload;

importjava.util.HashMap;

importjava.util.Map;

importjavax.servlet.http.HttpServletRequest;

importorg.slf4j.Logger;

importorg.slf4j.LoggerFactory;

importorg.springframework.beans.factory.annotation.Autowired;

importorg.springframework.stereotype.Controller;

importorg.springframework.web.bind.annotation.RequestMapping;

importorg.springframework.web.bind.annotation.RequestMethod;

importorg.springframework.web.bind.annotation.RequestParam;

importorg.springframework.web.bind.annotation.ResponseBody;

importorg.springframework.web.multipart.MultipartFile;

importcom.bigaoread.platform.service.fileupload.FileUploadService;

@Controller

@RequestMapping("/manage/fileupload")

publicclassFileUploadController {

privatestaticfinalLogger log = LoggerFactory.getLogger(FileUploadController.class);

@Autowired

privateFileUploadService fileUploadService;

@RequestMapping("/uploadPage")

publicString uploadPage() {

return"/manage/fileupload/uploadPage";

}

@RequestMapping(value="/upload", method=RequestMethod.POST)

@ResponseBody

publicMap uploadFile(HttpServletRequest request,

@RequestParamMultipartFile uploadFile){

Map resultMap = newHashMap<>();

resultMap = fileUploadService.uploadFile(uploadFile);

returnresultMap;

}

}package com.bigaoread.platform.web.manage.fileupload;import java.util.HashMap;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import com.bigaoread.platform.service.fileupload.FileUploadService;@Controller@RequestMapping("/manage/fileupload")public class FileUploadController { private static final Logger log = LoggerFactory.getLogger(FileUploadController.class); @Autowired private FileUploadService fileUploadService; @RequestMapping("/uploadPage") public String uploadPage() { return "/manage/fileupload/uploadPage"; } @RequestMapping(value="/upload", method=RequestMethod.POST) @ResponseBody public Map uploadFile(HttpServletRequest request, @RequestParam MultipartFile uploadFile){ Map resultMap = new HashMap<>(); resultMap = fileUploadService.uploadFile(uploadFile); return resultMap; }}

第五步:debug测试

上传文件 表结构原始.docx:

02655a7fa9fcb450cae9d5a73c8e8959.png

点击上传后,后台debug查看对象:

1d0e092df5bfc6392695ab9dae34a1ed.png

上传成功!

第二种,假如在前端还要传入其他参数时的做法

情景图(增加了一个下拉选):

94ff4ceafd8d014052d5613dd540aa09.png

这种多一个参数时,则需要修改两个地方就好了。

第一个是JSP:

如:

--%>

HTML>

数据生成

1

2

3

4

5

选择一个文件:

function uploadFiles(){

var formData=newFormData();

var uploadFile= $(‘#excelFile‘).get(0).files[0];

//  var uploadFile = new FormData($("#file")[0]);

var selectedId= $(‘#select‘).val();

formData.append("uploadFile",uploadFile);

formData.append("selectedId", selectedId);

console.log(uploadFile);

if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != ""){

$.ajax({

url:‘/manage/fileupload/upload‘,

type:‘POST‘,

data:formData,

async: false,

cache: false,

contentType: false, //不设置内容类型

processData: false, //不处理数据

success:function(data){

console.log(data);

alert(data.msg);

},

error:function(){

alert("上传失败!");

}

})

}else {

alert("选择的文件无效!请重新选择");

}

}

--%>

数据生成
12345     

选择一个文件:

         

controller代码:

packagecom.bigaoread.platform.web.manage.fileupload;

importjava.io.IOException;

importjava.util.HashMap;

importjava.util.Map;

importjavax.servlet.http.HttpServletRequest;

importorg.slf4j.Logger;

importorg.slf4j.LoggerFactory;

importorg.springframework.beans.factory.annotation.Autowired;

importorg.springframework.stereotype.Controller;

importorg.springframework.web.bind.annotation.RequestMapping;

importorg.springframework.web.bind.annotation.RequestMethod;

importorg.springframework.web.bind.annotation.RequestParam;

importorg.springframework.web.bind.annotation.ResponseBody;

importorg.springframework.web.multipart.MultipartFile;

importcom.bigaoread.platform.service.fileupload.FileUploadService;

@Controller

@RequestMapping("/manage/fileupload")

publicclassFileUploadController {

privatestaticfinalLogger log = LoggerFactory.getLogger(FileUploadController.class);

@Autowired

privateFileUploadService fileUploadService;

@RequestMapping("/uploadPage")

publicString uploadPage() {

return"/manage/fileupload/uploadPage";

}

@RequestMapping(value="/upload", method=RequestMethod.POST)

@ResponseBody

publicMap uploadFile(HttpServletRequest request,

@RequestParamMultipartFile uploadFile)throwsIOException{

String selectedId = request.getParameter("selectedId");

Map resultMap = newHashMap<>();

resultMap = fileUploadService.uploadFile(uploadFile);

returnresultMap;

}

}package com.bigaoread.platform.web.manage.fileupload;import java.io.IOException;import java.util.HashMap;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import com.bigaoread.platform.service.fileupload.FileUploadService;@Controller@RequestMapping("/manage/fileupload")public class FileUploadController { private static final Logger log = LoggerFactory.getLogger(FileUploadController.class); @Autowired private FileUploadService fileUploadService; @RequestMapping("/uploadPage") public String uploadPage() { return "/manage/fileupload/uploadPage"; } @RequestMapping(value="/upload", method=RequestMethod.POST) @ResponseBody public Map uploadFile(HttpServletRequest request, @RequestParam MultipartFile uploadFile) throws IOException{ String selectedId = request.getParameter("selectedId"); Map resultMap = new HashMap<>(); resultMap = fileUploadService.uploadFile(uploadFile); return resultMap; }}

测试效果:

53420db9ecafc917fd79c99b075816d2.png

结果:

54e26595b1f2640b83e7f464f52f4b4a.png

f477c565feb0e3cbfac12c48223fc6c7.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值