SSM框架实现多张图片和其他数据一起上传

一、SSM+Form 多张图片和其他数据一起上传，

1、导包:

    commons-fileupload-1.3.3.jar 

    commons-io-2.4.jar

2、springmvc.xml 文件配置

    <!--文件上传，id必须设置为multipartResolver-->
   <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--设置上传大小 单位：B-->
        <property name="maxUploadSize" value="10240000"></property>
   </bean>

3、后端设置

     @RequestMapping(value = "/upload.do") 

     public String updateItem(MultipartFile[] pictureFile,User user,HttpServletRequest request) throws IOException {
     //图片上传 //设置图片名称，名称不能重复，可以使用uuid 
    String picName = UUID.randomUUID().toString().replace("-",""); 
    System.out.println("传入图片的数量："+pictureFile.length);
    System.out.println("传入其他的参数或者实体："+user);
    //获取文件名 
   String oriName = pictureFile[0].getOriginalFilename(); 
   System.out.println("获取文件名 "+oriName);
    //获取图片后缀 
   String extName = oriName.substring(oriName.lastIndexOf(".")); 
   System.out.println("获取图片后缀"+extName);

    String path = request.getSession().getServletContext().getRealPath("image");
    System.out.println("图片路径"+path);
    File dir = new File(path,picName+extName); 
   if(!dir.exists()){
       dir.mkdirs();
   }
   //开始上传 
  pictureFile[0].transferTo(dir); 
  return "forward:/index.html"; 
}

4、前端页面配置

    <form enctype="multipart/form-data" method="post" action="upload.action">
       文件：<input type="file" name="pictureFile" multiple/>
       姓名：<input type="text" name="username"/>
       密码：<input type="text" name="password">
                 <input type="submit" value="上传"/>
     </form>

 

 

二、SSM+AJAX 多张图片和其他数据一起上传，总共四个步骤:

1、导包：

      同上。

 

2、springmvc.xml 文件配置

      同上。

3、controller 后台设置

     @RequestMapping(value = "/upload.do") 

     public String updateItem(@RequestParam("pictureFile") MultipartFile[] pictureFile,User user,HttpServletRequest request) throws IOException {
     //图片上传 //设置图片名称，名称不能重复，可以使用uuid
    String picName = UUID.randomUUID().toString().replace("-","");
    System.out.println("传入图片的数量："+pictureFile.length);
    System.out.println("传入其他的参数或者实体："+user);
    //获取文件名
   String oriName = pictureFile[0].getOriginalFilename();
   System.out.println("获取文件名 "+oriName);
    //获取图片后缀
   String extName = oriName.substring(oriName.lastIndexOf("."));
   System.out.println("获取图片后缀"+extName);

    String path = request.getSession().getServletContext().getRealPath("image");
    System.out.println("图片路径"+path);
    File dir = new File(path,picName+extName);
   if(!dir.exists()){
       dir.mkdirs();
   }
   //开始上传
  pictureFile[0].transferTo(dir);
  return "forward:/index.html";
}

4、前端页面配置:

   文件:<input type="file" name="pictureFile" multiple/>
   姓名:<input type="text" name="username"/>
   密码：<input type="text" name="password">
   <input type="submit" value="上传" onclick="shangchuan()"/>

 

   js部分
  <script type="text/javascript">
    function shangchuan() {
       var username = document.getElementsByName("username")[0].value;
       var password = document.getElementsByName("password")[0].value;
       var filesl = document.getElementsByName("pictureFile")[0].files;
       var files = document.getElementsByName("pictureFile")[0];

       var formData = new FormData();
       for(var i=0;i < filesl.length;i++){
             formData.append("pictureFile",files.files[i]);
       }
       formData.append("username", username);
       formData.append("password", password);
       console.log(formData)
      $.ajax({
             url:"upload.action",
             type:"post",
             data:formData,
             dataType:"json",
             mimeType: "multipart/form-data",
             cache:false,
             processData:false,
            contentType:false,
            async:false,
            success:function(data){
                   console.log(data)
            }
      })

 

至此两种方式配置结束，form表单形式更容易实现，也比较常用，推荐使用这种，希望能帮助到你！