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

最新推荐文章于 2024-04-28 04:01:16 发布
最新推荐文章于 2024-04-28 04:01:16 发布
阅读量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 2708
开始
FormData的使用之Ajax文件上传
Homer_Simpson的博客
05-13 1450
今天使用Ajax上传文件的时候，用到了formData，最后用console.log打印formDta怎么都打印不出来，后来发现使用错误。 原因是new FormData的参数是一个DOM对象，而非jQuery对象 具体使用方法见下面参考链接–地址。 ...
SpringMVC使用
weixin_44910435的博客
09-16 1073
SpringMVC
controller传输from-data数据格式的内容，取出传入数据为from-data格式的值
учёба
10-26 800
controller传输from-data数据格式的内容，取出传入数据为from-data格式的值
Ajax基础到实战（四）——formData对象_ajax formdata
最新发布
2401_84438654的博客
04-28 1230
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
SpringBoot Controller接口接收数据（二）（适合萌新）
橘子的博客
12-07 1162
前面我们一起探讨了，怎么去解读不同小姐姐发给我们的情书哈。当然那些小姐姐都是比较好懂的。俗话说的好，女人心海底针。所以呀，兄弟们!我们早如何撩小姐姐的这条路上还是要继续努力的。今天的小姐姐和前面的不一样。她们送的东西比较多。而且不同的小姐姐对礼物还进行了包装。 今天这里呢先讲最常见的两种种包装方式：json和form-data 一、json格式数据接收 好了废话不多说，请上我们今天的第一个小姐姐。 这个小姐姐，使用了json的方式来包装礼物。至于怎么包装的，各位。。你们去问小姐姐去哈。我这边只教你怎么拆。
【Ajax】向Controller传递form表单(未提交)的值
大吉的博客
07-16 761
目录需求实现第一个场景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 4837
使用Controller层处理前端请求时，接收前端页面参数是非常重要的一步，页面的参数该如何接收，常常会让人混淆，本文希望可以帮助大家更好地理解和掌握这些方法
利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能
10-19
Ajax技术允许我们在不刷新页面的情况下与服务器进行交互，而FormData对象则是HTML5引入的一个强大工具，它使得我们能够方便地发送二进制数据，如文件，通过Ajax请求。本文将详细讲解如何利用FormData对象和Spring ...
利用laravel+ajax实现文件上传功能方法示例
10-19
同时，确保对上传的文件进行安全验证，如大小限制、文件类型检查等，以防止恶意文件上传。在实际项目中，你可能还需要考虑文件的删除、重命名、多文件上传等功能。通过灵活运用Laravel提供的工具和Ajax技术，你可以...
利用SpringMVC和Ajax实现文件上传功能
08-25
为了提高安全性，确保对上传文件进行验证和过滤，避免上传恶意文件。此外，考虑使用异步上传以改善用户体验，通过显示进度条或通知用户文件上传的状态。 总结： 通过上述步骤，我们可以利用SpringMVC和Ajax在Java ...
Egg.js 中 AJax 上传文件获取参数的方法
12-11
在Egg.js中，使用AJAX上传文件并获取参数的过程涉及到多个关键步骤和技术。首先，前端需要使用HTML和JavaScript来构建文件上传表单，并通过AJAX实现异步提交。然后，后端使用Node.js和Egg.js框架处理上传请求，解析...
Ajax实现文件上传功能(Spring MVC)
10-15
然后使用`transferTo()`方法将上传的文件保存到服务器指定的路径下。`file.getOriginalFilename()`可以获取文件的原始名称。 需要注意的是，实际项目中还需要处理可能出现的异常，例如文件过大、文件类型限制等。...
SpringBoot Controller 传值与接收参数的几种常用方式
shgh_2004的专栏
10-21 8567
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 1091
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 1480
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 3386
当然这个注解也可以放到类上面，表示这个类中的方法请求路径的前缀，一般来说一个类的请求前缀都是一个样的，所以我们就没有必要在每个方法中都重复写相同的路径，我们把这一部分相同的路径提取出来放到类上面，这样就方便了我们以后的编码，也更好的将代码业务进行分类，避免出现同一个路径对应多个方法的错误形式。简单来说，将我们的处理结果返回给我们的用户（也可以说是前端，前端接收到页面后再渲染页面）但是当我们传递日期参数使用中行线的形式时，就会报错，就是下图中的date1形式，这怎么呢？我们可以看下图的变化，我们。
在Javaweb项目中用MVC模式进行后端管理员RSA加密登录的具体代码实现，要求使用MySQL数据库，利用ajax接口请求
03-27
以下是一个简单的示例代码： 1. Model层 ```java public class AdminModel { private String username; private String password; public AdminModel(String username, String password) { this.username = username; this.password = password; } public String getUsername() { return username; } public String getPassword() { return password; } } ``` 2. View层 ```html <form id="loginForm"> <label>Username:</label> <input type="text" name="username"><br> <label>Password:</label> <input type="password" name="password"><br> <input type="submit" value="Login"> </form> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $('#loginForm').submit(function(event) { event.preventDefault(); var formData = $(this).serialize(); $.ajax({ type: 'POST', url: '/admin/login', data: formData, success: function(response) { if (response.status == 'success') { alert('Login successful!'); } else { alert('Login failed!'); } }, error: function() { alert('An error occurred!'); } }); }); }); </script> ``` 3. Controller层 ```java public class AdminController { @PostMapping("/admin/login") @ResponseBody public Map<String, String> login(@RequestParam("username") String username, @RequestParam("password") String password) { // 从数据库中查询该管理员的公钥 String publicKey = getPublicKeyFromDatabase(username); // 使用公钥加密密码 String encryptedPassword = RSAUtils.encrypt(password, publicKey); // 生成Model对象 AdminModel admin = new AdminModel(username, encryptedPassword); // 将Model对象保存到数据库中 saveAdminToDatabase(admin); // 返回成功信息 Map<String, String> response = new HashMap<>(); response.put("status", "success"); return response; } private String getPublicKeyFromDatabase(String username) { // 从数据库中查询该管理员的公钥 // ... return publicKey; } private void saveAdminToDatabase(AdminModel admin) { // 将Model对象保存到数据库中 // ... } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值