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

最新推荐文章于 2024-05-19 17:56:25 发布
最新推荐文章于 2024-05-19 17:56:25 发布
阅读量5.1w 收藏 44
点赞数 12
分类专栏： 前端 文章标签： ajax 文件上传 FormData
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20565303/article/details/78478757
版权

需求背景：

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

第一种：单纯的上传文件

页面功能展现：


第一步：首先需要两个jar

commons-fileupload-1.3.2.jar
commons-io-2.4.jar

版本不限：

pom文件中相应两个jar：

	<dependency>
		<groupId>commons-io</groupId>
		<artifactId>commons-io</artifactId>
		<version>2.4</version>
	</dependency>

	<dependency>
		<groupId>commons-fileupload</groupId>
		<artifactId>commons-fileupload</artifactId>
		<version>1.3</version>
	</dependency>

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

    <!-- 文件上传配置 -->
    <bean id="multipartResolver" 
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 上传的最大限制 -->
		<property name="maxUploadSize" value="209715200" />
		<!-- 默认编码 -->
		<property name="defaultEncoding" value="UTF-8" />
		<!-- 上传文件的解析 -->
		<property name="resolveLazily" value="true" />
    </bean>

第三步：jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <title>数据生成</title>
</head>
<body>
	<div>
		<form method="post" id="file" action="" enctype="multipart/form-data">
		    <h3>选择一个文件:</h3>
		    <input id="excelFile" type="file" name="uploadFile" />
		    <br/><br/>
		    <input type="button" value="上传" οnclick="uploadFiles();"/>
		</form>
	</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
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("选择的文件无效！请重新选择");
	}
}   
</script>
</html>
有关于FormData可参考此链接： 

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

第四步：controller层代码

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<String, Object> uploadFile(HttpServletRequest request,
			@RequestParam MultipartFile uploadFile){
		Map<String,  Object> resultMap = new HashMap<>();
		resultMap = fileUploadService.uploadFile(uploadFile);
		return resultMap;
	}

}

第五步：debug测试

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


点击上传后，后台debug查看对象：


上传成功！



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

情景图（增加了一个下拉选）：


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

第一个是JSP：

如：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%-- <%@ page language="java" contentType="text/html; charset=UTF-8" --%>
<%-- 	pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"%> --%>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <title>数据生成</title>
</head>
<body>
	<div>
		<form method="post" id="file" action="" enctype="multipart/form-data">
			<select id="select">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
			</select>
		    <h3>选择一个文件:</h3>
		    <input id="excelFile" type="file" name="uploadFile" />
		    <br/><br/>
		    <input type="button" value="上传" οnclick="uploadFiles();"/>
		</form>
	</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
function uploadFiles(){  
	var formData = new FormData();
	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("选择的文件无效！请重新选择");
	}
}   
</script>
</html>

controller代码：

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<String, Object> uploadFile(HttpServletRequest request,
			@RequestParam MultipartFile uploadFile) throws IOException{
		String selectedId = request.getParameter("selectedId");
		Map<String,  Object> resultMap = new HashMap<>();
		resultMap = fileUploadService.uploadFile(uploadFile);
		return resultMap;
	}

}

测试效果：


结果：







tywangh
关注
  • 12
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
ajax实现文件上传 使用FormData进行Ajax请求
DuTianTian_csdn的博客
05-22 2706
开始
FormData的使用之Ajax文件上传
Homer_Simpson的博客
05-13 1446
今天使用Ajax上传文件的时候，用到了formData，最后用console.log打印formDta怎么都打印不出来，后来发现使用错误。 原因是new FormData的参数是一个DOM对象，而非jQuery对象 具体使用方法见下面参考链接–地址。 ...
SpringMVC使用
weixin_44910435的博客
09-16 1072
SpringMVC
controller传输from-data数据格式的内容，取出传入数据为from-data格式的值
учёба
10-26 790
controller传输from-data数据格式的内容，取出传入数据为from-data格式的值
FormData对象
最新发布
wandongle的博客
05-19 906
我们经常需要向服务器发送数据。而在前端，我们可以使用FormData对象来方便地收集和发送数据。FormData是一个用于构建表单数据的JavaScript对象，可以将数据序列化为键值对的形式，然后发送到服务器。
SpringBoot Controller接口接收数据（二）（适合萌新）
橘子的博客
12-07 1154
前面我们一起探讨了，怎么去解读不同小姐姐发给我们的情书哈。当然那些小姐姐都是比较好懂的。俗话说的好，女人心海底针。所以呀，兄弟们!我们早如何撩小姐姐的这条路上还是要继续努力的。今天的小姐姐和前面的不一样。她们送的东西比较多。而且不同的小姐姐对礼物还进行了包装。 今天这里呢先讲最常见的两种种包装方式：json和form-data 一、json格式数据接收 好了废话不多说，请上我们今天的第一个小姐姐。 这个小姐姐，使用了json的方式来包装礼物。至于怎么包装的，各位。。你们去问小姐姐去哈。我这边只教你怎么拆。
【Ajax】向Controller传递form表单(未提交)的值
大吉的博客
07-16 758
目录需求实现第一个场景form表单部分实现第二个场景 需求 1、不提交form表单的情况，将form表单的一个input的值传到后台的Controller（此处用jQuery） 2、后台的Controller接收到该值，Ajax的方式局部刷新页面某处（此处用thymeleaf实现） 实现第一个场景 form表单部分 <form method="post" th:action="@{/gdsubmit}"> <select type="text" plac
Controller层接收前端页面传参种类及实现
CJPSR的博客
06-08 4733
使用Controller层处理前端请求时，接收前端页面参数是非常重要的一步，页面的参数该如何接收，常常会让人混淆，本文希望可以帮助大家更好地理解和掌握这些方法
利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能
10-19
Ajax技术允许我们在不刷新页面的情况下与服务器进行交互，而FormData对象则是HTML5引入的一个强大工具，它使得我们能够方便地发送二进制数据，如文件，通过Ajax请求。本文将详细讲解如何利用FormData对象和Spring ...
Ajax实现文件上传功能(Spring MVC)
10-15
然后使用`transferTo()`方法将上传的文件保存到服务器指定的路径下。`file.getOriginalFilename()`可以获取文件的原始名称。 需要注意的是，实际项目中还需要处理可能出现的异常，例如文件过大、文件类型限制等。...
SpringBoot使用Ajax实现登录
12-02
在后端，我们需要创建一个Controller来处理Ajax请求。在`LoginController.java`中： ```java import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation....
使用ajax跨域调用springboot框架的api传输文件
10-15
总结起来，这个示例展示了如何在前端使用Ajax和FormData进行跨域文件上传，以及在SpringBoot后端配置CORS支持和处理文件上传的API。通过这种方式，你可以实现客户端和服务器之间的异步文件交互，而无需刷新整个页面...
SpringMVC+Ajax异步文件上传
07-30
- **FormData对象**：在前端，我们需要使用`FormData`对象来封装待上传的文件，然后通过`XMLHttpRequest`或`fetch` API来发送异步请求。 - **事件监听**：`Ajax`可以监听文件上传的进度，如开始、加载中、完成等...
SpringBoot Controller 传值与接收参数的几种常用方式
shgh_2004的专栏
10-21 8533
SpringBoot Controller 传值与接收参数的几种常用方式 第一类：请求路径参数 1、@PathVariable 获取路径参数。即url/{id}这种形式。 2、@RequestParam 获取查询参数。即url?name=这种形式。 例子： GET http://localhost:8080/demo/?name=suki_rong 对应的java代码： @GetMapping("/demo/") public void demo(@PathVariable(name =
jquery以form形式向controller传值
yw2567的博客
12-04 776
<%@ page language=”java” contentType=”text/html; charset=utf-8” pageEncoding=”utf-8”%> <% String path = request.getContextPath(); String basePath = request.getScheme() + “://”
关于form表单提交文件file后台controller中参数获取不到的解决办法
Yu17aa的博客
09-22 1086
1.首先，我们需要在springmvc.xml配置文件中配置文件解析器 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="10485760"></property> </bea...
SpringMVC提交form表单并上传图片在controller中接收
千里之行，始于足下！
07-21 2626
1:首先下载这两个jar包 2:在form表单属性中加上：enctype="multipart/form-data" method="post" 3:在controller中取图片代码 MultipartResolver resolver = new CommonsMultipartResolver(request .getSession().getServletContex...
ajax formdata提交上传,Ajax提交用FormData()上传文件
weixin_39996035的博客
08-05 1476
1.form声明如下2.ajax设置如下var formData = new FormData(document.getElementById("form"));$.ajax({url:document.form.action,type:"POST",data:formData,processData:false, // 告诉jquery不要处理发送的数据contentType:false,...
Springboot——Controller层开发、请求与响应、RESTful开发规范
weixin_51351637的博客
11-26 3372
当然这个注解也可以放到类上面，表示这个类中的方法请求路径的前缀，一般来说一个类的请求前缀都是一个样的，所以我们就没有必要在每个方法中都重复写相同的路径，我们把这一部分相同的路径提取出来放到类上面，这样就方便了我们以后的编码，也更好的将代码业务进行分类，避免出现同一个路径对应多个方法的错误形式。简单来说，将我们的处理结果返回给我们的用户（也可以说是前端，前端接收到页面后再渲染页面）但是当我们传递日期参数使用中行线的形式时，就会报错，就是下图中的date1形式，这怎么呢？我们可以看下图的变化，我们。
在Javaweb项目中用MVC模式进行后端管理员RSA加密登录的具体代码实现，要求使用MySQL数据库，利用ajax接口请求
03-27
3. Controller层 ```java public class AdminController { @PostMapping("/admin/login") @ResponseBody public Map, String> login(@RequestParam("username") String username, @RequestParam("password") ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值