Form上传多图片

  • Post author:
  • Post category:其他


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



版权声明:本文为m0_37543627原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。