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

来源：互联网发布：是以圣人不行而知编辑：程序博客网时间：2024/06/05 00:55

不是建议你，而是强制要求:

跳过方法一直接看方法二或方法三。方法一是我早期写的博客，没有仔细排版。1 方法一和方法二的区别：     方法一使用jquery的ajaxfileupload,方法二使用插件dropzone.js，方法一和方法二后台代码都一样。方法二简单好上手，学习成本低。  方法一和方法二是把文件的地址记录到数据库中，第一步，先上传文件，上传到服务器中的一个位置地址(例如:jboss/aaaaa.jpg)，然后把文件的位置地址记录到页面的一个  隐藏域（<input type="hidden" name="fileURl" value="jboss/aaaaa.jpg">），  第二步,点击提交表单，把姓名性别，地址还有这个隐藏域记录的地址值(jboss/aaaaa.jpg)一起记录到数据库中。</span>注:方法二dropzone.js 也可以一步提交，把文件和表单数据存到数据库中，而不是只存文件的路径可以参考https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone,见我文末demo2 方法一二和方法三的区别： 方法三可以直接把文件以二进制形式存到数据库      方法一和二是分两步提交，方法三是直接一步提交，一步提交就要面临一个问题：要传文件就要设置页面编码方式为enctype="multipart/form-data"，所以后台你想获    得姓名，性别，年龄等表单数据，用原来的request.getParameter("name")取到的值为null，这时候就要用    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;   multipartRequest.getParameter("name")即可获得表单值。

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

方法三直接把文件以二进制形式存到数据库

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"%><!DOCTYPE html><html lang="zh-cn">  <head>    <meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0">    <title>Insert title here</title>    </head>    <body>       <hr>        <h1>上传测试</h1>        <form action="${pageContext.request.contextPath}/upphoto" method="post" enctype="multipart/form-data">            姓名：<input type="text" name="name" />  </br>          文件 : <input type="file" name="file"/>            </br>     <input type="submit" value="上传"/>        </form>  </body>    </html>

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;@Controllerpublic 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的值

---------------------------------------------------------方法三完----------------------------------------------------------------

方法一：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 上传文件 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>

2.2表单_保存的_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.3 表单_保存的_后台代码

 @Controller        public class UserController {        private final static Logger logger = LoggerFactory.getLogger(UserController .class);          //表单保存        @RequestMapping(value = "/user/save")@ResponseBodypublic Map save(Model model, HttpServletRequest request,User user) {Map<String,Object> map = new HashMap<String, Object>();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;}

2.4 文件_上传_后台代码

@RequestMapping(value = "/fileUpload", method = { RequestMethod.POST, RequestMethod.GET })@ResponseBodypublic Map<String, Object> fileUpload(@RequestParam(value = "file") MultipartFile file,HttpServletRequest request) {                  //这里要注意 @RequestParam(value = "file")必须和jsp中的文件上传框的id保持一致，                //你jsp中id=“filefile”这里就要用@RequestParam(value = "filefile")Map<String, Object> map = new HashMap<String, Object>(); 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.5文件_上传_js和_jsp 见下面图1-1 我会详细讲这一块

文件上传：我把js和jsp分离了，方便调试。分离写和把js直接写在jsp的<script type="text/javascript">.....</script>里效果一样，看个人习惯。

注：表单的js和jsp以及后台见上文,文件上传后台代码见上文，我下面详细介绍下文件上传js和jsp：图1-1

2.5.1 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 onclick="return ajaxDemoUpload() 点击上传后会触发

2.5.2 js部分

图1-1的js部分四处必须为$.ajaxDemoUpload(){},固定的
图片看不清可以另存为看。

-------------------------------------------------------------------图1-1-----------------------------------------

3 bug：可能会报错，问题及解决

http://zhidao.baidu.com/link?url=qqydUngiUoiU6BAVME8oQMB5jcf3HJJOEaCclphvGcuRRRczvWanqP4j0BTupFE3k9-ebdihjsX8QSB5NIsJ1q

4 如果想要更好看的样式可以参考

http://www.anyrt.com/blog/list/imgpreview.html

---------------------------------------------------------方法一完---------------------------------------------------------

方法二：使用插件dropzone.js，建议用这个方法，简单上手快

0 入门教程

入门教程：http://www.renfei.org/blog/dropzone-js-introduction.html

1 先引入js和css

<link href="<%=request.getContextPath() %>/js/dropzone/dropzone.min.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="<%=request.getContextPath() %>/js/dropzone/dropzone.min.js"></script>

2 form表单

<form class="ui form" id="formId" method="POST"  name="form">  姓名：---------  性别：-------  地址：-------           <!-- filePath --> <input id="filePath" type="text" name="filePath"><input  id="save"  type="button" value="提交"></form>

3 然后在jsp下面body里面写(见下图)

<script type="text/javascript">Dropzone.autoDiscover = false;var dropz = new Dropzone("#file", {url: "<%=request.getContextPath() %>/",        addRemoveLinks: true,        autoProcessQueue:false,        parallelUploads:8,        maxFiles: 8,//最大可上传的文件个数        maxFilesize: 2,        /* acceptedFiles: ".bmp,.jpg,.jpeg,.gif,.png", */        init: function() {            this.on("removedfile", function(file) {                console.log("File " + file.name + "removed");            });        },        success:function(file,data){                        },        dictMaxFilesExceeded:"文件数量过多",        dictDefaultMessage:"拖动文件到该区域或点击上传文件",        dictCancelUpload:"取消",        dictCancelUploadConfirmation:"取消上传操作",        dictRemoveFile:"删除",        dictFileTooBig:"可添加的最大文件大小为{{maxFilesize}}Mb，当前文件大小为{{filesize}}Mb ",    });      dropz.on("removedfile",function(file){   })</script>

后台代码怎么写？和方法一的后台代码一模一样。

你看看方法一后台代码的“表单保存的后台代码”和“文件上传后台代码”部分就行了祝你成功。

四后续答网友问题

--------------------------------------------------------------以下是2016-06-21更新----------------------------------------

注：文章开头提到了dropzone.js也可以一步提交,即在提交form表单数据的同时也提交文件，前两天有网友发私信问，

所以我今天研究了一下，下面给个demo(2016-06-21)。

在url下面加上两个配置选项：paramName : "myfile",// uploadMultiple: false,这两个配置选项什么意思自己看吧

http://www.open-open.com/lib/view/open1448610841329.html 后台怎么接收呢？

后台和方法三相同，只要改一句就行了，

把MultipartFile multipartFile = multipartRequest.getFile("file");

改为MultipartFile multipartFile = multipartRequest.getFile("myfile");

这个getFile("myfile")里的参数要和paramName : "myfile"里的参数myfile相同就行就可以获得文件

debug看结果

1 jsp页面

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"%><!DOCTYPE html><html lang="zh-cn"><head><script type="text/javascript" src="<%=request.getContextPath() %>/js/dropzone/dropzone.min.js"></script><link href="<%=request.getContextPath() %>/js/dropzone/dropzone.min.css" type="text/css" rel="stylesheet" /><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><title>Insert title here</title></head><body class="component-register"><form id="my-awesome-dropzone" class="dropzone"><div class="dropzone-previews"></div><input type="text" name="username" /> </br><input type="text" name="password" /><button type="submit">Submit data and files!</button></form><script type="text/javascript">Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element  // The configuration we've talked about above  url: "<%=request.getContextPath() %>/upphoto",  autoProcessQueue: false,  uploadMultiple: true,  parallelUploads: 100,  maxFiles: 100,  paramName : "myfile",//注意**后台根据这个配置参数获得文件MultipartFile multipartFile = multipartRequest.getFile("myfile");  uploadMultiple: false,  // The setting up of the dropzone  init: function() {    var myDropzone = this;    // First change the button to actually tell Dropzone to process the queue.    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {      // Make sure that the form isn't actually being sent.      e.preventDefault();      e.stopPropagation();      myDropzone.processQueue();    });    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead    // of the sending event because uploadMultiple is set to true.    this.on("sendingmultiple", function() {      // Gets triggered when the form is actually being sent.      // Hide the success button or the complete form.    });    this.on("successmultiple", function(files, response) {      // Gets triggered when the files have successfully been sent.      // Redirect user or notify of success.    });    this.on("errormultiple", function(files, response) {      // Gets triggered when there was an error sending the files.      // Maybe show form again, and notify user of error    });  }}</script></body></html>

2后台代码

后台代码复制方法三就行了，只要把

MultipartFile multipartFile = multipartRequest.getFile("file");

改为MultipartFile multipartFile = multipartRequest.getFile("myfile");

2.1文件

2.2表单参数

2.3 参考链接

https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

http://blog.csdn.net/xuexiaodong009/article/details/45556431

http://www.renfei.org/blog/dropzone-js-introduction.html

五我博客所有文章目录

这篇博客写的太早没有仔细排版,请见谅。

上传图片更推荐这篇文章:http://blog.csdn.net/wabiaozia/article/details/52640441

我博客所有文章目录:http://blog.csdn.net/wabiaozia?viewmode=contents

2 0