jQuery.form.js与Spring MVC实现异步文件上传及参数封装
本文介绍基于jQuery.form.js与Spring MVC框架实现异步文件上传的方法。重点解析表单enctype设置、ajaxSubmit使用及后台接收逻辑。针对常见误区，如错误封装JSON导致415错误及多余使用@RequestBody的问题，提供了正确的代码实现与参数接收方案，帮助开发者避免常见坑点。
技术栈与功能概述
本文采用的技术方案包括jquery.form.js库与springmvc框架，旨在实现异步文件上传功能，同时演示如何在上传过程中封装其他对象，并列出开发中需要注意的关键事项。
该功能本身实现较为简单，但涉及参数传递类型的细节处理。例如，jquery原生ajax方法与jquery.form.js中ajaxSubmit方法的参数配置存在差异，具体细节将在后续文章中补充说明。
关键点：HTML表单必须包含三个核心属性：action指向处理接口（如fileUpload/fileUpload），method设为post，且必须设置enctype="multipart/form-data"以支持文件数据传输。
基础表单直接提交
1. 基础表单直接提交方式
HTML代码实现如下：
<body>
<form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data">
<input type="text" name="password">
<input type="file" name="file">
<input type="text" name="username">
<input type="submit" value="submit">
</form>
<button id="button">提交</button>
</body> Java后端代码（关于Spring MVC的具体配置，包括文件上传组件的配置，可参考https://www.jb51.net/article/84078.htm）
@Controller
@RequestMapping("/fileUpload")
public class FileUpload {
@RequestMapping("/fileUpload")
@ResponseBody
public String FileUpload1(@RequestParam("file")MultipartFile file/*, @RequestParam("username")String username*/){
System.out.println("------------------------------- "+ file.getSize());
if(!file.isEmpty()){
System.out.println("Process file: "+file.getOriginalFilename() );
try {
FileUtils.copyInputStreamToFile(file.getInputStream(), new File("c:\\temp\\imooc\\", System.currentTimeMillis()+ file.getOriginalFilename()));
} catch (IOException e) {
e.printStackTrace();
}
}
return "NewFile";
}
} jQuery.form.js异步提交实现
2. 利用jquery.form.js的ajaxSubmit方法实现异步提交
HTML与Java后端代码保持与第一种方式一致，主要区别在于为id为button的按钮绑定点击事件。
$("#button").click(function(){
var hideForm = $('form');
var options = {
dataType : "json",
/*data: {'file': $("input[type=file]").val(), "username": '123', password: "123"},*/
beforeSubmit : function() {
alert("正在上传");
},
success : function(result) {
alert('成功上传！');
},
error : function(result) {
}
};
hideForm.ajaxSubmit(options);
}); 参数封装与常见错误处理
3. 后端通过User对象接收username和password字段
<form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="submit">
</form> 开发者可能会尝试以下步骤：将表单数据封装为JSON对象，并在上述JS代码中通过data属性传递。
data:{'file': $("input[type=file]").val(), 'user':{"username": '123', password: "123"}}这种做法在此场景下属于多余操作，此时发送的请求详情如图所示：
页面将返回415错误。
--------------------------------------------------------------
最合理的代码实现应为：HTML代码与方案1相同，JS代码与方案2相同，Java后端代码调整如下：
public String FileUpload1(@RequestParam("file")MultipartFile file, User user){ 此外，User对象前不能添加@RequestBody注解。
以上内容介绍了使用jQuery.form.js与Spring MVC框架实现文件上传功能的完整流程，希望对大家有所帮助。若需了解更多技术细节，敬请关注本站后续更新。
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式：声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23