页面批量上传文件

页面批量上传文件

---

前言

本文主要实现一次性批量上传文件，上传完成后页面读取,例如读取WORD、TXT文件在线转换成PDF

页面实现一次性选择多个文件批量上传主要有两个思路：

   1、在页面读取多个文件后，直接通过"MultipartHttpServletRequest"在后台循环获取保存；

   2、利用ajax在页面将获取的每个文件作为参数传递到后台。

---

提示：框架使用springboot+thymeleaf+easyUI，目前测试的转PDF格式为：DOCX、DOC、TXT

一、MultipartHttpServletRequest在后台循环获取保存

提示：html: 属性multiple=“multiple” 为选择多个文件

<form id="ff" th:action="@{/meditation/saveExpers}"
			enctype="multipart/form-data" method="post">
			上传文件： <input type="file" name="file" id="file" multiple="multiple" />
			<input type="button" id="submitBtn" onclick="submitForm();"
				value="上传文档" class="sec_btn" onclass="btn btn-primary" />&nbsp; <label
				style="color: red">*支持DCOX、DOC、TXT</label>
</form>

<script type="text/javascript" th:inline="javascript">
		/*<![CDATA[*/
		function submitForm() {
			if ($('#ff').form('validate')) {
				window.top.$.messager.confirm('确认', '您确认提交该操作吗？', function(r) {
					if (r) {
						$("#ff").submit();
					}
				});
			}
		}
		/*]]>*/
</script>

提示：controller处理

 @ResponseBody
	@RequestMapping("/saveExpers")
	public Map<String, Object> saveExpers(Meditation exper, MultipartHttpServletRequest request)
			throws IllegalStateException, IOException {
		Map<String, Object> resultMap = new HashMap<String, Object>();
		Iterator<String> fileNames = request.getFileNames();
		while (fileNames.hasNext()) {
			String fileName = fileNames.next();
			List<MultipartFile> fileList = request.getFiles(fileName);
			if (fileList.size() > 0) {
				// 遍历文件列表
				Iterator<MultipartFile> fileIte = fileList.iterator();
				while (fileIte.hasNext()) {
					// 获得每一个文件
					MultipartFile multipartFile = fileIte.next();
					meditationService.insertFileUpload(multipartFile, resultMap);//自己定义            的保存文件方法
				}
			}
		}

		return resultMap;
	}

二、利用ajax后台循环读取文件存放到data中传递到后台

提示：html

<form id="ff" th:action="@{/meditation/saveExper}"
			enctype="multipart/form-data" method="post">
			上传文件： <input type="file" name="file" id="file" multiple="multiple" />
			<input type="button" id="submitBtn" onclick="submitForm();"
				value="上传文档" class="sec_btn" onclass="btn btn-primary" />&nbsp; <label
				style="color: red">*支持DCOX、DOC、TXT</label>
</form>

<script type="text/javascript" th:inline="javascript">
		/*<![CDATA[*/
		function submitForm() {
			if ($('#ff').form('validate')) {
				window.top.$.messager.confirm('确认', '您确认提交该操作吗？', function(r) {
					if (r) {
						//$("#ff").submit();
						 var fileList = [];
						 var length =$('#file')[0].files.length;
						 if(length==0){
							 errorAlert('未选择文件!');	
							 return false;
						 }
						 for (var i = 0; i < length; i++) {
				                fileList.push($('#file')[0].files[i]);
				            }
						 var formData = new FormData();
				         var request = new XMLHttpRequest();
				            //循环添加到formData中
				            fileList.forEach(function (file) {
				                formData.append('files', file, file.name);//将获取文件循环存放到data中（关键）
				            })
						$.ajax({
							type:"post",
							url:[[@{/meditation/saveExper}]],
							 type:'post',
						     data: formData,
						     contentType: false,
						     processData: false,
						     success:function(data){
						        if(data.messageCode=="1"){
									 notice("上传成功！");		
									 location.href=[[@{/meditation/experList}]];
									}else if(data.messageCode=="0"){
									errorAlert('上传失败!');
									return false;
								}else{
									errorAlert('操作失败！');
								}
							}
						});  
					}
				});
			}
		}
		/*]]>*/
	</script>

提示：后台获取，因为页面已经封装完，相对于第一种方法，后台只需遍历即可，MultipartFile[ ]接收页面传递的文件

@ResponseBody
	@RequestMapping("/saveExper")
	public Map<String, Object> saveExper(Meditation exper, @RequestParam MultipartFile[] files) {
		Map<String, Object> resultMap = new HashMap<String, Object>();
		if (files.length != 0) {
			for (int i = 0; i < files.length; i++) {
				meditationService.insertFileUpload(files[i], resultMap);//自己定义的保存文件的方法，其中files[i]即可循环获取页面传递文件
			}
		}
		return resultMap;
	}