使用MultipartResolver完成图片上传功能

 

1.首先是HTML部分

<input  type="file" id="id-input-file-3" onchange="setImg(this);" />

2.js部分

<script>
   var image = ''; 
   function setImg(obj){//用于进行图片上传，返回地址
          var f=$(obj).val();
          console.info(f);
          if(f == null || f ==undefined || f == ''){
              return false;
          }
          if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f))
          {
              $(obj).val('');
              alert("文件格式错误");
              return false;
          }
          var data = new FormData();
          $.each($(obj)[0].files,function(i,file){
              data.append('file', file);
          });
          console.info(data);
          $.ajax({
              type: "POST",
              url: "image/imageUpload.do",
              data: data,
              cache: false,
              contentType: false,    //不可缺
              processData: false,    //不可缺
              dataType:"json",
              success: function(suc) {
                  if(suc.code==0){
                      alert("上传成功") ;                                  
                    }else{
                      alert("上传失败") ; 
                     
                  }
              },
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                  
              }
          });
      } 
 </script>

3.添加 commons-fileupload.jar包 

4.配置 spring mvc 文件上传的解析器

<!-- 设置上传文件最大值   1M=1*1024*1024(B)=1048576 bytes -->  
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="1048576" />   
    <property name="defaultEncoding" value="UTF-8"/>  
   </bean>  

5.将图片保存至服务器，并将文件存储路径保存在数据库中。
文件存储位置：D:\.metadata\.me_tcat\webapps\footplatform\images
最后存在数据库中的地址为：http://localhost:8080/footplatform/images/20180809/1533781708442_736.jpg

public String imageUpload(MultipartFile file,HttpServletRequest request){

        String msg="";//返回存储路径
        int code=1;
        String fileName=file.getOriginalFilename();//获取文件名加后缀
        if(fileName!=null&&fileName!=""){
        String returnUrl = request.getScheme() + "://" + request.getServerName() 
        +":" + request.getServerPort() + request.getContextPath() +"/images/";//访问路径  
        String path = request.getSession().getServletContext().getRealPath("/images"); 
     //文件存储位置
        String fileF = fileName.substring(fileName.lastIndexOf("."),fileName.length());
    //文件后缀
        fileName=new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;//新的文件名    
        String dateFormatTo = "yyyyMMdd";
        SimpleDateFormat dateFormat = new SimpleDateFormat(dateFormatTo);
        String fileAdd =  dateFormat.format(new Date());  
        File file1 =new File(path+"/"+fileAdd);    
        if(!file1 .exists()  && !file1 .isDirectory()){   //如果文件夹不存在则创建     
            file1 .mkdir();  
         }
        File targetFile  = new File(file1, fileName);
           try {
               file.transferTo(targetFile);//转存文件，上传文件写到服务器上指定的文件。
               msg=returnUrl+fileAdd+"/"+fileName;
               code=0;
               System.out.println(msg);
           } catch (Exception e) {
               e.printStackTrace();
           }
        }
         HttpSession session = request.getSession();
         LawyerInfo lawyerInfo=(LawyerInfo) session.getAttribute("lawyerLogin");
 		 String user_id=lawyerInfo.getUserId();
         iPhotoService.upload(user_id, msg);//将文件存储路径存储到数据库
         return JSON.toJSONString(ResponseResult.result(code, msg));
}

6.可以看到文件上传到了服务器中

最后的效果

在其他页面使用