springmvc带文件上传的form表单提交，用 jquery的ajaxfileupload或使用dropzone上传图文详解
方法一和方法二处理思路一致，分两步提交：第一步 提交图片到文件服务器，并返回图片所在文件服务器的地址如：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 然后点击 "上传" 按钮后，触发οnclick="return ajaxDemoUpload();"执行ajaxDemoUpload()函数，通过ajax方式，把图片传给
后台(后台处理完图片后,ajax的回调函数sucess里，手动创建一个 “存放文件上传的路径url”的隐藏域，
当点击页面的 提交 按钮 时，可以把“存放文件上传的路径url”存到数据库中，这样数据库中就只存放图片地址，减轻了数据库的压力，
要展示图片时只要)
1.3 上传完成后，点击页面的 提交按钮，触发事件$("#save").click(function() { })保存表单。
总的思路就是先上传文件，上传完成后把图片路径url保存在隐藏域中，然后再点击页面的提交 按钮,
就会把姓名,性别,地址,隐藏域存放的图片上传路径url,一起存到数据库中。
2 具体代码:
我会分两部分讲，1 文件上传(包括文件上传的js和后台java代码) 2表单保存 (包括表单保存的js和后台java代码)
2.1表单页面 jsp aaaaa.jsp
我会先介绍方法一的思路,思路介绍完后再介绍具体代码
2.2文件上传-js见下面 图1-1
文件上传：我把js和jsp分离了，方便调试。分离写和把js直接写在jsp的里效果一样，看个人习惯。
jsp 引入一个js
jquery的扩展js，ajaxfileupload.js，地址：http://download.csdn.net/detail/wabiaozia/9391303
图1-1jsp部分的1 id="demo" 和图1-1 js部分里的”三“对应，缩略图显示的位置图1-1jsp部分的 2 id="file" 和图1-1 js部分里的一对应，表示你的上传文件框的id，这个id的值可以随便命名你也可以叫id="fileaaa"，
但是要注意这里的id值要和后 台接收的一致， 如你jsp中id="file"，value就要为file 后台接收为@RequestParam(value = "file")，你jsp中id=“filefile”后台接收就要
为 @RequestParam(value= "filefile")
3 οnclick="return ajaxDemoUpload() 点击上传后会触发
js部分
图1-1的js部分 四 处必须为$.ajaxDemoUpload(){},固定的图片看不清可以另存为看。
----------------------------图1-1-----------------------------------------
2.3 文件上传-后台java代码
@RequestMapping(value = "/fileUpload", method = { RequestMethod.POST, RequestMethod.GET })
@ResponseBody
public Map fileUpload(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request) {
//这里要注意 @RequestParam(value = "file")必须和jsp中的文件上传框的id保持一致，
//你jsp中id=“filefile”这里就要用@RequestParam(value = "filefile")
Map map = new HashMap();
if (file.isEmpty()) {
map.put("message", "文件不能为空");
return map;
}
if (!isTrue) {
map.put("message", "选择正确的文件格式");
return map;
}
if (file.getSize()>file_size) {
map.put("message", "文件大小不能超过2M");
return map;
}
try {
FileUtils.copyInputStreamToFile(file.getInputStream(), new File("你想存放的位置"));
map.put("message", "Y");// 文件上传成功
} catch (IOException e) {
map.put("message", "N");// 文件上传失败
}
String path = fileString.substring(resourceDir.length());//
path = path + fileType;
path = path.replace("\\", "/");
map.put("fileName", path);
return map;
}
｝ 2.3表单-保存的js代码
$("#save").click(function() { //点击save按钮触发这个保存事件
$.ajax({
url : rootPath + '/xxxxx?t=' + new Date().getTime(),
type : 'POST',
data : $('#formId').serialize(),
dataType : 'json',
success : function(d) {}
)};
});
1 里面用ajax把表单的： 姓名，性别和地址这些数据提交给后台。
2 提交表单数据给后台我喜欢用这个方法：先给form指定一个id如 id="formId" 然后$('#formId').serialize()就可以把数据提交给后台了，后台直接用
User user就能接收数据，springmvc会自动把数据封装给对应的的user对象里的属性。很方便吧！
3 后台用的springmvc，我手写一下部分代码：表单保存+文件上传2.4 表单-保存的后台java代码
@Controller
public class UserController {
private final static Logger logger = LoggerFactory.getLogger(UserController .class);
//表单保存
@RequestMapping(value = "/user/save")
@ResponseBody
public Map save(Model model, HttpServletRequest request,User user) {
Map map = new HashMap();
if(null==user.xxx){
map.put("message", "不能为空")
return map;
}
try {
userService.save(user);
map.put("message", "保存成功");
map.put("code", "1");
} catch (Exception e) {
map.put("message", e.getMessage());
map.put("code", "0");
logger.error("保存数据异常", e);
}
return map;
} 3 bug：可能会报错，问题及解决
http://zhidao.baidu.com/link?url=qqydUngiUoiU6BAVME8oQMB5jcf3HJJOEaCclphvGcuRRRczvWanqP4j0BTupFE3k9-ebdihjsX8QSB5NIsJ1q
4 如果想要更好看的样式可以参考
http://www.anyrt.com/blog/list/imgpreview.html
------------------------------方法一完---------------------------------------------------------
方法二 ：使用插件dropzone.js，建议用这个方法，简单上手快
1 入门教程
2 先引入js和css
3 然后在jsp下面body里面写(见下图)
方法三 直接把文件以二进制形式存到数据库
3.1 jsp部分：
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
Insert title here
上传测试
3.2 controller部分：
package com.cpic.caf.shareCompon.controller;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@Controller
public class upphoto{
@RequestMapping(value="/upphoto2")
public String upload2(HttpServletRequest request,ModelMap model) {
return "shareCompon/aaaaa";//跳转到aaaaa.jsp页面
}
@RequestMapping(value="/upphoto")
public void upload(HttpServletRequest request,ModelMap model) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
/**页面控件的文件流**/
MultipartFile multipartFile = multipartRequest.getFile("file");
String name= multipartRequest.getParameter("name");
SimpleDateFormat dateformat = new SimpleDateFormat("yyyy/MM/dd/HH");
/**构建图片保存的目录**/ String logoPathDir = "/files"+ dateformat.format(new Date());
/**得到图片保存目录的真实路径**/
String logoRealPathDir = request.getSession().getServletContext().getRealPath(logoPathDir);
/**根据真实路径创建目录**/
File logoSaveFile = new File(logoRealPathDir); if(!logoSaveFile.exists()) logoSaveFile.mkdirs();
/**页面控件的文件流**/ /**获取文件的后缀**/
String suffix = multipartFile.getOriginalFilename().substring (multipartFile.getOriginalFilename().lastIndexOf("."));
// /**使用UUID生成文件名称**/ //
String logImageName = UUID.randomUUID().toString()+ suffix;
//构建文件名称
String logImageName = multipartFile.getOriginalFilename();
/**拼成完整的文件保存路径加文件**/
String fileName = logoRealPathDir + File.separator + logImageName;
File file = new File(fileName);
try {
multipartFile.transferTo(file);
}
catch (IllegalStateException e)
{ e.printStackTrace(); }
catch (IOException e)
{ e.printStackTrace(); } } }
3.3 debug调试
3.3.1 请求
3.3.2 后台
1 文件流
2 页面参数name的值
---------------------------------------方法三完----------------------------------------------------------------
四 后续答网友问题
1 jsp页面
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
Insert title here
2后台代码
五 我博客所有文章目录
我博客所有文章目录:http://blog.csdn.net/wabiaozia?viewmode=contents