`

SpringMVC之表单提交===③===多文件上传表单

阅读更多

上文简单介绍了springmvc单文件上传表单 ,本文继续介绍多文件上传表单。包含单文件上传的表单已经能够满足大部分功能需求,但任然不够完善。实际业务中可能会包含多个文件同时上传,例如:商家在电商平台申请店铺需要上传身份证扫描文件,这时会有两份上传文件(正/反面)。此时,单文件表单就不能满足需求了;当然你也可以把多个文件拆分为多个表单,关于业务实际问题不在本文讨论范围之内。

 

在很多时候并不是说问题本身有多难,难的是把问题找出来。只要能把疑问命题找到,距离解决问题也就相差0.1毫米;所以,springmvc 对多文件上传这个问题域有多种解决方案,下面介绍 springmvc 是如何支持多文件上传的!

 

方案一:使用数组接受表单文件 org.springframework.web.multipart.MultipartFile[]

  • 创建多个文件域,当前测试用例表单中文件域数据不固定
        <!-- 定义表单结构 -->
        <div id="normal_form" class="form"><!-- 多文件上传 -->
            <h2 class="intro">C. 多文件上传表单</h2>
            <form class="hidden" action="<%=basePath %>form/uploadMore.do" method="post" enctype="multipart/form-data">
                <p>
                    <label for="upFile1">选择要上传的文件:</label>
                    <input type="file" name="multipartFiles" />
                </p>
                
                <p>
                    <input type="button" id="addFileItem" value="Add File Item" />
                    &nbsp;
                    &nbsp;
                    &nbsp;
                    <input type="submit" value="Submit" />
                </p>
            </form>
        </div><!-- /多文件上传 -->

 

  •  添加事件
window.console && console.log("form.js");

$(function() {
	var thisPageFn = new FormNormalFn();
	thisPageFn.initEvents();
	thisPageFn.initData();
	window.console && console.log("Page load event is complete");
});

/**
 * @description form.jsp 页面交互
 * @author Huang.Yong
 * @version 0.1
 * @date 2016年1月5日 - 下午6:16:04
 */
function FormNormalFn() {
	var $thisObj = this;
	var baseCtt = $("body");

	/**
	 * 初始化事件
	 */
	this.initEvents = function() {
		// 展示隐藏
		$(".intro").click(function(){
			$(this).parent().find("form").toggleClass("hidden");
		});
		
		// 添加上传文件项
		$("#addFileItem").click(function(){
			var $this = $(this);
			var btnCtn = $this.parent();
			
			var p =$("<p/>").insertBefore(btnCtn);
			p.append($("<input/>",{
				type : "file",
				name : "multipartFiles"
			})).append($("<input/>",{
				type : "button",
				value : " X "
			}).click(function(){
				var $delBtn = $(this);
				$delBtn.parent().remove();
			}));
		});
	}

	/**
	 * 初始化数据
	 */
	this.initData = function() {
	}

	/**
	 * 日志记录
	 */
	function log(msg) {
		window.console && console.log(msg);
	}

	return this;
}

 

  • 定义控制器接口
/**
 * @Title: uploadMore
 * @Description: 多文件上传
 * @param multipartFiles
 * @return ModelMap
 */
@RequestMapping("/uploadMore")
@ResponseBody
public ModelMap uploadMore(@RequestParam("multipartFiles") MultipartFile[] multipartFiles) {
	boolean flag = false;
	String message = null;
	List<ModelMap> data = Lists.newArrayList();

	try {
		for (MultipartFile multipartFile : multipartFiles) {
			System.out.println(multipartFile.getName() + "-----" + multipartFile.getOriginalFilename());
			ModelMap uploadOne = uploadOne(multipartFile);
			data.add(uploadOne);
		}

		flag = true;
	} catch (Exception e) {
		flag = false;
		message = "";
		LOGGER.warn(message + " : " + e.getMessage(), e);
	}

	return WebUtil.getModelMap(flag, data, message);
}

 tips:此种方式上传多个文件有两个地方需要特别注意,

  ①表单类型enctype="multipart/form-data"以及表单名称<input type="file" name="multipartFiles" />;

  ②控制器参数名称public ModelMap uploadMore(@RequestParam("multipartFiles") MultipartFile[] multipartFiles)

 

结果验证:

当前选择三个需要上传的文件

 

断点查看控制器:



 

 由此可见,文件已上传成功!不过此方法有些缺陷:

  1. 表单文件域名称必须与接口中数组参数名一致
  2. 只能根据参数 multipartFiles 下标值区分文件,一旦UI中文件域位置调整就会产生严重后果(如:身份证文件营业执照文件对调等)

方案二:表单实体(FormEntities)+ 请求对象(HttpServletRequest)

  • 定义复杂表单

 

<div id="normal_form" class="form"><!-- 复杂文件上传表单 -->
    <h2 class="intro">D. 复杂文件上传表单</h2>
    <form class="hidden" action="<%=basePath %>form/complexForm.do" method="post" enctype="multipart/form-data">
        <p>
            <label for="form4_item1" class="title">文本框:</label>
            <input type="text" id="form4_item1" class="item" name="formText" />
        </p>
        <p>
            <label for="form4_item2" class="title">密码框:</label>
            <input type="password" id="form4_item2" class="item" name="formPwd" />
        </p>
        <p>
            <label>单选:</label>
            <input type="radio" id="form1_item3" class="item" name="formRadios" value="rdo1" />
            <label for="form1_item3">单选一</label>
            &nbsp;
            &nbsp;
            <input type="radio" id="form1_item32" class="item" name="formRadios" value="rdo2" />
            <label for="form1_item32">单选二</label>
            &nbsp;
            &nbsp;
            <input type="radio" id="form1_item33" class="item" name="formRadios" value="rdo3" />
            <label for="form1_item33">单选三</label>
        </p>
        <p>
            <label>复选:</label>
            <input type="checkbox" id="form4_item4" class="item" name="formCheckboxes" value="复选框1" />
            <label for="form4_item4" class="title">复选一</label>
            &nbsp;
            &nbsp;
            <input type="checkbox" id="form4_item5" class="item" name="formCheckboxes" value="复选框2" />
            <label for="form4_item5" class="title">复选二</label>
            &nbsp;
            &nbsp;
            <input type="checkbox" id="form4_item6" class="item" name="formCheckboxes" value="复选框3" />
            <label for="form4_item6" class="title">复选三</label>
        </p>
        <p>
            <label for="form4_sl">下拉:</label>
            <select name="formSl" id="form1_sl">
                <option value="value1">下拉1</option>
                <option value="value2">下拉2</option>
                <option value="value3">下拉3</option>
                <option value="value4">下拉4</option>
                <option value="value5">下拉5</option>
            </select>
        </p>
        <p>
            <label for="form4_txta" style="left:left;">多行文本:</label>
            <textarea name="formTxt" id="form4_txta" cols="30" rows="10" style="resize:none;left:left;"></textarea>
        </p>
        <p>
            <input type="button" class="addFileItem2" value="Add File Item" />
            &nbsp;
            &nbsp;
            &nbsp;
            <input type="submit" value="Submit" />
        </p>
    </form>
</div><!-- /复杂文件上传表单 -->

 

  •  表单事件,点击【Add File Item】添加一个新的文件域,且文件域name值不能相同

 

// 添加上传文件项
$(".addFileItem2").click(function(){
	var $this = $(this);
	var btnCtn = $this.parent();
	
	var p =$("<p/>").insertBefore(btnCtn);
	p.append($("<input/>",{
		type : "file",
		name : "multipartFiles_" + (new Date().getTime())  // 每次不同
	})).append($("<input/>",{
		type : "button",
		value : " X "
	}).click(function(){
		var $delBtn = $(this);
		$delBtn.parent().remove();
	}));
});

 

  • 开发控制器接口

 

/**
 * @Title: complexForm
 * @Description: 映射复杂表单
 * @param form 表单实体映射
 * @param request 请求对象
 */
@RequestMapping("/complexForm")
@ResponseBody
public ModelMap complexForm(SimpleForm form, HttpServletRequest request) {
	boolean flag = false;
	String message = null;
	Map<String, Object> data = Maps.newLinkedHashMap();

	try {
		// 表单数据
		data.put("formData", form);

		// 获取附件
		// 如果是文件上传: request.getClass() == MultipartHttpServletRequest.class
		if (request instanceof MultipartHttpServletRequest) {
			MultipartHttpServletRequest multipartReq = (MultipartHttpServletRequest) request;
			Map<String, MultipartFile> fileMap = multipartReq.getFileMap();

			// 上传到指定位置
			if (MapUtils.isNotEmpty(fileMap)) {
				int count = 1;
				for (Entry<String, MultipartFile> me : fileMap.entrySet()) {
					
					// 表单项名称
					String formItemName = me.getKey();
					// 与表单项名称关联的唯一附件
					MultipartFile multipartFile = me.getValue();

					// do something
					ModelMap uploadOne = this.uploadOne(multipartFile);
					data.put(formItemName + count, uploadOne);
					count++;
				}
			}
		}

		flag = true;
	} catch (Exception e) {
		flag = false;
		message = "";
		LOGGER.warn(message + " : " + e.getMessage(), e);
	}

	return WebUtil.getModelMap(flag, data, message);
}

 

Tips:使用此种方式上传多个文件附件时,文件域name值不能一致(name作为 Map 的 Key 值);如果可以确定一致性,则推荐使用方案一

 

结果验证:

选择需要上传的文件:

断点控制器观察文件列表:



通过结果观察表单其他数据:



 

 

至此,关于 springmvc 表单映射已记录完成;其中更多细节部分可以下载附件:ssmFU.zip(maven)查阅研究,欢迎留言探讨学习。

  • 大小: 26.2 KB
  • 大小: 25.7 KB
  • 大小: 18.8 KB
  • 大小: 58.8 KB
  • 大小: 44 KB
1
0
分享到:
评论

相关推荐

    SpringMVC之表单提交===②===单文件上传表单

    现在,当用户通过表单提交文件时,Spring MVC将调用`handleFileUpload`方法处理文件上传。你可以根据需要对文件进行进一步操作,如存储到服务器、数据库或其他服务。 总结,本文介绍了Spring MVC中单文件上传的基本...

    SpringMVC之表单提交===①===普通表单

    在本文中,我们将深入探讨Spring MVC框架中的表单提交,主要关注如何处理普通的HTML表单。Spring MVC是Java开发Web应用程序的一个强大工具,它提供了一种优雅的方式来处理HTTP请求,特别是表单数据的提交。 首先,`...

    Spring In Action SpringMVC 提交表单

    《Spring In Action: SpringMVC 提交表单详解》 在Web开发中,SpringMVC作为Spring框架的一部分,是处理HTTP请求和响应的强大工具。它为开发者提供了构建高性能、易于测试的Web应用程序的结构。本篇文章将深入探讨...

    SpringMVC文件上传,多文件上传实例

    在这个“SpringMVC文件上传,多文件上传实例”中,我们将深入探讨如何在SpringMVC环境中实现文件上传功能,包括单个文件上传以及多个文件的批量上传。 1. **文件上传原理**: 文件上传是通过HTTP协议的POST请求来...

    springmvc-form表单的使用

    - 用户填写完表单并提交后,Spring MVC会自动将表单数据绑定到相应的POJO对象中。在Controller中,可以通过方法参数来接收这些数据。例如,可以定义一个接受`MyPojo`类型参数的方法来处理提交的数据。 ```java @...

    springMVC多文件上传demo

    在Spring MVC框架中,多文件上传是一个常见的需求,特别是在处理用户提交的表单时,比如上传图片、文档等。这个"springMVC多文件上传demo"是一个实例,它展示了如何在Spring MVC应用中实现这个功能。下面将详细介绍...

    SpringMVC文件上传Demo代码

    在SpringMVC中实现文件上传是一项常见的任务,它允许用户通过表单将本地文件发送到服务器进行存储或处理。这个"SpringMVC文件上传Demo代码"是一个实例,演示了如何配置和使用SpringMVC来实现这一功能。 首先,我们...

    IDEA SpringMVC 实现文件的上传下载

    在SpringMVC中,文件上传主要依赖于`CommonsMultipartResolver`,这是Spring提供的一个解析多部分请求的组件。在配置文件中,我们需要添加如下配置启用文件上传: ```xml &lt;bean id="multipartResolver" class=...

    SpringMVC单文件上传、多文件上传、文件列表显示、文件下载

    本文将详细讲解如何实现SpringMVC中的单文件上传、多文件上传、文件列表显示以及文件下载。 首先,我们需要理解SpringMVC处理文件上传的基本原理。在SpringMVC中,文件上传通常涉及到`CommonsMultipartResolver`...

    springMVC文件上传demo(亲测有效)

    总之,这个"springMVC文件上传demo"提供了一个完整的文件上传解决方案,包括前端表单、后端控制器、异常处理以及必要的配置。通过学习和实践这个Demo,开发者可以快速掌握SpringMVC环境下文件上传的实现方式。

    springmvc上传文件controller,vue

    在这个项目中,我们将深入探讨如何使用Spring MVC作为后端控制器来处理文件上传,以及Vue.js在前端如何与之配合。 首先,我们需要在Spring MVC的Controller层创建一个方法来接收文件。这个方法通常会使用`@...

    Springmvc上传文件.docx

    SpringMVC 上传文件详解 SpringMVC 框架中上传文件是非常常见的操作,今天我们来详细讲解 SpringMVC 中的文件上传过程。 文件上传的必要条件 在 SpringMVC 中,文件上传需要满足以下几个条件: 1. 表单的 ...

    SpringMVC上传文件的四种方法

    当文件与表单数据一起提交时,可以使用`@ModelAttribute`注解。首先,创建一个Java类来封装文件和其他字段: ```java public class FileUploadForm { private MultipartFile file; // getter & setter } ```...

    springmvc文件上传练习项目

    在Spring MVC框架中,文件上传是一项常见的功能,用于接收用户通过表单提交的文件数据。本项目"springmvc文件上传练习项目"旨在提供一个实践平台,帮助开发者掌握如何使用Spring MVC处理Multipart类型的请求,实现...

    SpringMVC文件上传案例

    在Spring MVC框架中,文件上传是一项常见的功能,用于接收用户通过表单提交的文件数据。本案例将深入探讨如何在Spring MVC中实现文件上传,并提供关键知识点和步骤。 首先,理解Spring MVC的基本工作原理至关重要。...

    springMVC上传文件.zip_springmvc_上传文件_文件上传

    在SpringMVC中实现文件上传是一项常见的任务,它涉及到HTTP协议、多部分表单数据处理以及服务器端的文件存储策略。下面将详细阐述如何在SpringMVC中进行文件上传,并涵盖相关知识点。 1. **MultipartFile接口** ...

    SpringMVC上传文件 SSH上传文件

    本主题将深入探讨如何使用SpringMVC和SSH(Struts2 + Hibernate + Spring)框架来实现文件的上传与下载。 首先,我们来看SpringMVC中的文件上传。SpringMVC是Spring框架的一部分,它提供了强大的MVC设计模式支持,...

    springmvc ajax 文件上传

    2. **通过表单提交文件** - **前端**:创建一个HTML表单,包含一个`&lt;input type="file"&gt;`元素,用户选择文件后,提交表单。例如: ```html &lt;form action="/upload" method="post" enctype="multipart/form-data"&gt;...

Global site tag (gtag.js) - Google Analytics