Form上传多图片

来源：互联网发布：淘宝页面设计代码编辑：程序博客网时间：2024/06/04 23:25

<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>

0 0