springmvc带文件上传的form表单提交，用 jquery的ajaxfileupload或使用dropzone上传图文详解

本文链接：https://blog.csdn.net/wabiaozia/article/details/50221945

本文详细介绍了两种在SpringMVC中实现文件上传的方法：一是利用jQuery的ajaxfileupload插件，二是使用Dropzone.js。这两种方法都需要将文件上传与表单数据分开处理，先上传文件并获取URL，再提交表单数据。同时，文中还提到了直接将文件以二进制形式存储到数据库的方案，并解答了相关问题。

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

方法一和方法二处理思路一致，分两步提交：第一步提交图片到文件服务器，并返回图片所在文件服务器的地址如：xxx/aaa.jpg，把文件地址(xxx/aaa.jpg)放到页面隐藏域。.第二步提交表单，把表单数据和文件地址(xxx/aaa.jpg)记录到数据库。此方式数据库中记录的只是图片的地址，图片真正存放的位置是文件服务器。为了方便说明，称这种提交方式为两步提交。

方法三的处理思路是把表单数据和图片一起提交给后台。这种方式是把图片以二进制对象存到数据库中。由于只提交一次，为了方便说明这种方法称为一步提交。

一步提交就要面临一个问题：因为要传文件，就只有把页面编码方式设置为enctype="multipart/form-data"，这时后台想获得姓名，性别，年龄等表单数据，

用普通获取参数方式：request.getParameter("name")方式取到的值就会为null。这时候就要用

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
multipartRequest.getParameter("name")

方式获得表单值。

此篇博客为早期作品，没怎么注重思路和排版，请见谅。

推荐一个更强大的文件上传组件,功能更加丰富,样式更加优美:点击打开链接 ,这篇排版比较好思路也很流畅。

方法一：jquery的ajaxfileupload方法

表单页面图

1 上传文件流程思路

1.1 点击选择文件：

1.2 然后点击 "上传" 按钮后，触发onclick="return ajaxDemoUpload();"执行ajaxDemoUpload()函数，通过ajax方式，把图片传给

后台(后台处理完图片后,ajax的回调函数sucess里，手动创建一个 “存放文件上传的路径url”的隐藏域，

当点击页面的提交按钮时，可以把“存放文件上传的路径url”存到数据库中，这样数据库中就只存放图片地址，减轻了数据库的压力，

要展示图片时只要<img src="文件地址路径">)

1.3 上传完成后，点击页面的提交按钮，触发事件$("#save").click(function() { })保存表单。

总的思路就是先上传文件，上传完成后把图片路径url保存在隐藏域中，然后再点击页面的提交按钮,

就会把姓名,性别,地址,隐藏域存放的图片上传路径url,一起存到数据库中。

2 具体代码:

我会分两部分讲，1 文件上传(包括文件上传的js和后台java代码) 2表单保存 (包括表单保存的js和后台java代码)

2.1表单页面 jsp aaaaa.jsp

我会先介绍方法一的思路,思路介绍完后再介绍具体代码

 <form class="ui form" id="formId" method="POST" enctype="multipart/form-data" name="form">
            姓名：------
            性别：------
            地址：------
<span class="small-6 large-6 columns"> <input type="file" name="file" class="input"  size="45" id="file" ></span>  
<span class="small-12 large-1 columns end"><input type="button" <span style="color:#ff0000;">onclick="return ajaxDemoUpload();"</span> value="上传" /> </span>  
  
</form>