上文简单介绍了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" /> <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)
结果验证:
当前选择三个需要上传的文件
断点查看控制器:
由此可见,文件已上传成功!不过此方法有些缺陷:
- 表单文件域名称必须与接口中数组参数名一致
- 只能根据参数 multipartFiles 下标值区分文件,一旦UI中文件域位置调整就会产生严重后果(如:身份证文件与营业执照文件对调等)