表单控件多文件上传

最新推荐文章于 2024-04-04 08:44:26 发布

爱我所爱6502

最新推荐文章于 2024-04-04 08:44:26 发布

阅读量704

点赞数

分类专栏： Web前端-form 文章标签： java JSP

本文链接：https://blog.csdn.net/qq_34694569/article/details/55257942

版权

Web前端-form 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Java代码：

	 /**
	 * 获取多个文件，，注意问题：<br>
	 * 1.表单无需属性enctype="multipart/form-data"<br>
	 * 2.前台使用XMLHttpRequest对象或ajax发送数据<br>
	 * 3.前台使用FormData对象获取多个文件
	 * @param request
	 * @return
	 * @throws Exception
	 */
	@RequestMapping("/multi/save.do")
	public String save(HttpServletRequest request) throws Exception{
		//转为MultipartHttpServletRequest
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		//获取所有的文件
		Map map = multipartRequest.getFileMap();
		MultipartFile multipartFile = null;
		for (Iterator i = map.keySet().iterator(); i.hasNext();) {
			DemoMultiPhoto photo = new DemoMultiPhoto();
			Object obj = i.next();
			multipartFile = (MultipartFile) map.get(obj);
			//获取文件名称
			String fileName = multipartFile.getOriginalFilename();
			//获取文件内容，二进制传送过来的
			byte[] content = multipartFile.getBytes();
			
			photo.setName(fileName);
			photo.setPhotoParentId(content);
			multiFileService.doSave(photo);
		}
		return "multiFile";
	}
	
	
	/**
	 * 只能获取单个文件(其他文件被覆盖)，注意问题：<br>
	 * 1.表单属性enctype="multipart/form-data"，二进制流传送数据<br>
	 * 2.表单文件控件必须有name属性<br>
	 * 3.后台接受文件控件时，类型不是String，而是{@link MultipartFile}，否则接受数据为null<br>
	 * 4.HttpServletRequest转为MultipartHttpServletRequest，否则接受数据为null<br>
	 * 5.只能获取一个文件，其他文件被覆盖(key不能重复)
	 * @param request 
	 * @param name
	 * @param ph 对象必须为{@link MultipartFile}
	 * @return
	 * @throws Exception
	 */
	@RequestMapping("/multi/save2.do")
	public String save2(HttpServletRequest request, String name, MultipartFile ph) throws Exception{
		//转为MultipartHttpServletRequest
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		//遍历上传的多文件，其map的Key值是file控件的name属性，所以只能保存单个文件(key不重复，被覆盖)
		Map map = multipartRequest.getFileMap();
		MultipartFile multipartFile = null;
		for (Iterator i = map.keySet().iterator(); i.hasNext();) {
			DemoMultiPhoto photo = new DemoMultiPhoto();
			Object obj = i.next();
			multipartFile = (MultipartFile) map.get(obj);
			//获取文件名称
			String fileName = multipartFile.getOriginalFilename();
			//获取文件内容，二进制传送过来的
			byte[] content = multipartFile.getBytes();
			
			photo.setName(fileName);
			photo.setPhotoParentId(content);
			multiFileService.doSave(photo);
		}
		return "multiFile";
	}

对应jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
  <head>
	<jsp:include page="inc.jsp" flush="true"></jsp:include>
    <title>MultiFile 多图片上传</title>
    <meta charset="utf-8">
	<script type="text/javascript">
		function upload(){
			var xhr = new XMLHttpRequest();
			var form = new FormData();
			var files = document.getElementById("file2").files;
			var name = $("#name2").val();
			form.append("name",name);
			for(var i=0; i< files.length; i++){
				form.append(files[i].name,files[i]);
			}
			xhr.open("POST","<%=request.getContextPath()%>/multi/save.do");
			xhr.send(form);
		}
  	</script>
  </head>
  <body>
		<form id="form1" action="javascript:upload();" method="post">
			<label>用户：</label>
			<input type="text" id="name1" style="border:2px solid red;" name="name"/><br>
			<label>图片：</label>
			<input type="file" id="file1" multiple="multiple" style="border:2px solid red;" name="ph"/>
			<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过5.0M</p>
			<button type="submit" style="border: 2px solid red;">上传1</button>
		</form>
		
		<form id="form2" action="<%=request.getContextPath()%>/multi/save2.do" method="post" enctype="multipart/form-data">
			<label>用户：</label>
			<input type="text" id="name2" style="border:2px solid red;" name="name"/><br>
			<label>图片：</label>
			<input type="file" id="file2" multiple="multiple" style="border:2px solid red;" name="ph"/>
			<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过5.0M</p>
			<button type="submit" style="border: 2px solid red;">上传2</button>
		</form>
  </body>
</html>