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

本文转载自 WRian_Ban 查看原文 2015/12/08 19924 dropzone/ 文件/ upload/ 表单/ ajax/ jquery/ MultipartHttpServlet/ springmvc/ 上传

方法一和方法二处理思路一致，分两步提交：第一步提交图片到文件服务器，并返回图片所在文件服务器的地址如：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>

2.2文件上传-js见下面图1-1

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

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() 点击上传后会触发

js部分

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

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

2.3 文件上传-后台java代码

		@RequestMapping(value = "/fileUpload", method = { RequestMethod.POST, RequestMethod.GET })
		@ResponseBody
		public 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.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<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;


	}

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

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

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

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

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

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

1 入门教程

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

2 先引入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>

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>

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

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

-------------------------------------------方法二完----------------------------------------------------------

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

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;

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

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

四后续答网友问题

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

前两天有网友发私信问:"dropzone.js可以一步提交吗？即同事提交form表单数据和文件给后台。

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

所以我今天研究了一下，下面给个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

智能推荐

注意！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。

猜您在找

jQuery实现ajax提交form表单（可以是提交json），用springmvc接收。图文详解 php使用jquery Form ajax 提交表单，并上传文件使用jquery.form.js提交表单上传文件关于使用jquery.form.js上传文件同时提交表单的方法 jquery提交带上传文件的form表单

赞助商链接