Form上传多图片

    xiaoxiao2021-03-31  28

    <span style="white-space:pre"> </span> /** * 获取多个文件,,注意问题:<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>

    转载请注明原文地址: https://ju.6miu.com/read-665441.html

    最新回复(0)