springMVC文件上传,springMVC上传图片

作者: 韦德国际1946手机版  发布:2019-08-13

springMVC上传图片,springmvc上传文件

一》吧上传图片方法建议来

public class UpPicture {
    
    public static void upPicture(MultipartFile fl,HttpServletRequest  req) throws Exception{
        
        String path =req.getSession().getServletContext().getRealPath("/") "upload/";
        //真实路线
        String fileName = fl.getOriginalFilename();  
        File targetFile = new File(path, fileName);  
        if(!targetFile.exists()){  
            targetFile.mkdirs();  
        }  
        System.out.println(path);
         //保存  
        try {  
            fl.transferTo(targetFile);  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }    
    /**
     * 判定文件大小
     * @param fl
     * @return
     */
    public static Boolean  size(MultipartFile  fl){
        // System.out.println(fl.length());
        // 判别文件大小
        long s = fl.getSize();
        if (s>=2000000000) {
            return false;
        }
        return true;
    }
    /**
     * 判断图片格式
     * @param flFileName
     * @return
     */
    public static Boolean geShi(String flFileName){
        // 推断传入的是否为 图片
                Set<String> set = UpPicture.imgSet();
                Boolean b = false;
                for (String s : set) {
                    if (flFileName.substring(flFileName.length()-3).equalsIgnoreCase((String) s)) {
                        b = true;
                        break;
                    }
                }
                    return b;
    }
    /**
     * 把广大的图片格式纳入 set中
     *
     * @return
     */
    public static Set imgSet() {// BMP、JPG、JPEG、PNG、GIF。
        Set<String> set = new HashSet<>();
        set.add("bmp");
        set.add("jpg");
        set.add("jpeg");
        set.add("png");
        set.add("gif");
        return set;
    }
}
二》controller层
/**
     * 实施更新头像页面
     * @return
     */
    @RequestMapping("/do_editphoto.do")
    @ResponseBody
    public String doModiPhoto(Integer noid,MultipartFile file,HttpServletRequest request,Model model){
        noid=1;
      String fileFileName=file.getOriginalFilename();
       boolean b=UpPicture.size(file) ;
      if(!b ){
         return "格式不对";
      }
      b= UpPicture.geShi(fileFileName);
      if(!b){
          return "格式不对";
      }
         try {
            UpPicture.upPicture(file, request);
        } catch (Exception e) {
            return "error";
        }
          //保存路线是
          String path="/family/upload/" fileFileName;
          userService.updatPhotoUrl(path,noid);
        return path;
    }
    /**
     * 切图上传图片
     * @param x
     * @param y
     * @param w
     * @param h
     * @param fl
     * @param session
     * @return
     */
    @RequestMapping("do_crop")
    @ResponseBody
    public String   do_crop(String flName,String flFileName,Integer x,Integer y,Integer w,Integer h,HttpSession session){
        if(x==null  || y==null || w==null || h==null){
            return  "请稍候再试";
        }
        try{
           ImageCut.cutImage(flFileName,x,y,w,h);
        }catch(Exception e){
            return "系统不太稳固啊";
        }
            // 获得session
        Integer userId = (Integer)session.getAttribute("userId");
        userId=1;
         //保存路线是
              String path=flName;
            userService.updatPhotoUrl(path,userId);
            return "ok";
}

三》jsp页面

<div id="firstDiv">
    <form  id="formImg">
     <div>
        <input type="hidden" name="noid" value="${noid }">
        <span>改换头像:</span><br><br>
        <input type="file" name="file" id="file"><br>
             <a id="qclose" href="javascript:void(0)">展现裁剪预览图</a>
    </div><br>
       <!-- 裁剪图片 -->   
       <div id="qietu">
          <img src="${photo}" id="hahahhah"  />
          <div id="preview-pane">
                 <div class="preview-container">
                  <img src="${photo}" id="targetss"  class="jcrop-preview" alt="Preview" />
                </div>
           </div>
      </div>
    </form><br>
    <div>
        <form id="crop_form">
            <input type="hidden"   name="flName"  value="${photo}"/>
            <input type="hidden"   name="flFileName"  value="D:/tomcat8/tomcat8/webapps/${photo}"/>
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <button type="button" id="crop_submit" class="btn btn-info" onclick="ajax_crop()">确认剪裁并保留</button>
        </form>
    </div>
</div>
</BODY>
<script type="text/javascript">

//切图进行上传
function ajax_crop(){
var url="${BasePath}/user/do_crop.do";

$("#crop_form").ajaxSubmit({  
    type:'post',  
    url:url,  
    clearForm:true,//清空全部表单元素的值
    resetForm:true,//复位全部表单成分的值
    success:function(STR){  
          if(STR=="ok"){
                alert("修改成功");
                window.location.reload();
          }else{
              alert("修改失利啦");
          }
    },  
    error:function(XmlHttpRequest,textStatus,errorThrown){  
        alert("上传退步了");
springMVC文件上传,springMVC上传图片。    }  
});
}
$("#qclose").click(function(){
      $("#preview-pane").show();
})
//上传图片
$("#file").change(function (){
    var url="${BasePath }/user/do_editphoto.do";
    var files=$("#file").val();
    if(files==null || files==""){
        alert("不能够为空哦");
        return ;
    }
    $("#formImg").ajaxSubmit({
        type:"post",
        url:url,
        success:function(str){
            if(str=="error"){
                alert("请稍后再试");
            }else if(str=="格式不对"){
                alert("格式不对");
            }else{
                window.location.reload();
            }
        },
         error:function(XmlHttpRequest,textStatus,errorThrown){  
             alert("编辑退步了");
         }
    })
    
})
 
jQuery(function($){
    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,
        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),
        xsize = $pcnt.width(),
        ysize = $pcnt.height();
    console.log('init',[xsize,ysize]);
    $('#hahahhah').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: 1,
     // aspectRatio: xsize / ysize,
      onRelease: clearCoords
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;
      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });          

    function updatePreview(c){
        
      if (parseInt(c.w) > 0){
        var rx = xsize / c.w;
        var ry = ysize / c.h;
        $pimg.css({
          width: Math.round(rx * boundx) 'px',
          height: Math.round(ry * boundy) 'px',
          marginLeft: '-' Math.round(rx * c.x) 'px',
        marginTop: '-' Math.round(ry * c.y) 'px'
        });
      }
      console.log([c.x,c.y,c.w,c.h]);
      $("#x").val(c.x);  
      $("#y").val(c.y);  
      $("#w").val(c.w);  
      $("#h").val(c.h);
    };
function clearCoords(){
      $('#coords input').val('');
    };
  });
</script>

一》吧上传图片方法建议来 public class UpPicture { public static void upPicture(MultipartFile fl,HttpServletRequest req) th...

  1. 在工程重视库下添Gavin件上传jar包

一、文件上传

一》吧上传图片方法提议来

commons-fileupload-1.2.2.jar

1、spring-mvc.xml中文件上传的安排

public class UpPicture {
    
    public static void upPicture(MultipartFile fl,HttpServletRequest  req) throws Exception{
        
        String path =req.getSession().getServletContext().getRealPath("/") "upload/";
        //真实路线
        String fileName = fl.getOriginalFilename();  
        File targetFile = new File(path, fileName);  
        if(!targetFile.exists()){  
            targetFile.mkdirs();  
        }  
        System.out.println(path);
         //保存  
        try {  
            fl.transferTo(targetFile);  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }    
    /**
     * 剖断文件大小
     * @param fl
     * @return
     */
    public static Boolean  size(MultipartFile  fl){
        // System.out.println(fl.length());
        // 判定文件大小
        long s = fl.getSize();
        if (s>=2000000000) {
            return false;
        }
        return true;
    }
    /**
     * 决断图片格式
     * @param flFileName
     * @return
     */
    public static Boolean geShi(String flFileName){
        // 判定传入的是不是为 图片
                Set<String> set = UpPicture.imgSet();
                Boolean b = false;
                for (String s : set) {
                    if (flFileName.substring(flFileName.length()-3).equalsIgnoreCase((String) s)) {
                        b = true;
                        break;
                    }
                }
                    return b;
    }
    /**
     * 把广大的图片格式放入 set中
     *
     * @return
     */
    public static Set imgSet() {// BMP、JPG、JPEG、PNG、GIF。
        Set<String> set = new HashSet<>();
        set.add("bmp");
        set.add("jpg");
        set.add("jpeg");
        set.add("png");
        set.add("gif");
        return set;
    }
}
二》controller层
/**
     * 实行更新头像页面
     * @return
     */
    @RequestMapping("/do_editphoto.do")
    @ResponseBody
    public String doModiPhoto(Integer noid,MultipartFile file,HttpServletRequest request,Model model){
        noid=1;
      String fileFileName=file.getOriginalFilename();
       boolean b=UpPicture.size(file) ;
      if(!b ){
         return "格式不对";
      }
      b= UpPicture.geShi(fileFileName);
      if(!b){
          return "格式不对";
      }
         try {
            UpPicture.upPicture(file, request);
        } catch (Exception e) {
            return "error";
        }
          //保存路线是
          String path="/family/upload/" fileFileName;
          userService.updatPhotoUrl(path,noid);
        return path;
    }
    /**
     * 切图上传图片
     * @param x
     * @param y
     * @param w
     * @param h
     * @param fl
     * @param session
     * @return
     */
    @RequestMapping("do_crop")
    @ResponseBody
    public String   do_crop(String flName,String flFileName,Integer x,Integer y,Integer w,Integer h,HttpSession session){
        if(x==null  || y==null || w==null || h==null){
            return  "请稍候再试";
        }
        try{
           ImageCut.cutImage(flFileName,x,y,w,h);
        }catch(Exception e){
            return "系统不太平静啊";
        }
            // 获得session
        Integer userId = (Integer)session.getAttribute("userId");
        userId=1;
         //保存路线是
              String path=flName;
            userService.updatPhotoUrl(path,userId);
            return "ok";
}

commons-io-2.4.jar

<!-- 定义文件上传解析器 -->
<bean id="multipartResolver"
     class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <!-- 设定默认编码 -->
   <property name="defaultEncoding" value="UTF-8"></property>
   <!-- 设定文件上传的最大值5MB,5*1024*1024 -->
   <property name="maxUploadSize" value="5242880"></property>
</bean>

三》jsp页面

2.jsp页面安装form表单属性enctype

2、jodatime

<div id="firstDiv">
    <form  id="formImg">
     <div>
        <input type="hidden" name="noid" value="${noid }">
        <span>改换头像:</span><br><br>
        <input type="file" name="file" id="file"><br>
             <a id="qclose" href="javascript:void(0)">显示裁剪预览图</a>
    </div><br>
       <!-- 裁剪图片 -->   
       <div id="qietu">
          <img src="${photo}" id="hahahhah"  />
          <div id="preview-pane">
                 <div class="preview-container">
                  <img src="${photo}" id="targetss"  class="jcrop-preview" alt="Preview" />
                </div>
           </div>
      </div>
    </form><br>
    <div>
        <form id="crop_form">
            <input type="hidden"   name="flName"  value="${photo}"/>
            <input type="hidden"   name="flFileName"  value="D:/tomcat8/tomcat8/webapps/${photo}"/>
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <button type="button" id="crop_submit" class="btn btn-info" onclick="ajax_crop()">确认剪裁并保存</button>
        </form>
    </div>
</div>
</BODY>
<script type="text/javascript">

在表单中上传图片时,须要在form的属性设置中增加enctype="multipart/form-data"。

<joda-time.version>2.9.9</joda-time.version>

//切图进行上传
function ajax_crop(){
var url="${BasePath}/user/do_crop.do";

[html] view plain copy

<!-- 时间操作组件 -->
<dependency>
    <groupId>joda-time</groupId>
    <artifactId>joda-time</artifactId>
    <version>${joda-time.version}</version>
</dependency>

$("#crop_form").ajaxSubmit({  
    type:'post',  
    url:url,  
    clearForm:true,//清空全体表单成分的值
    resetForm:true,//重新恢复设置全部表单成分的值
    success:function(STR){  
          if(STR=="ok"){
                alert("修改成功");
                window.location.reload();
          }else{
              alert("修改失利啦");
          }
    },  
    error:function(XmlHttpRequest,textStatus,errorThrown){  
        alert("上传退步了");
    }  
});
}
$("#qclose").click(function(){
      $("#preview-pane").show();
})
//上传图片
$("#file").change(function (){
    var url="${BasePath }/user/do_editphoto.do";
    var files=$("#file").val();
    if(files==null || files==""){
        alert("无法为空哦");
        return ;
    }
    $("#formImg").ajaxSubmit({
        type:"post",
        url:url,
        success:function(str){
            if(str=="error"){
                alert("请稍后再试");
            }else if(str=="格式不对"){
                alert("格式不对");
            }else{
                window.location.reload();
            }
        },
         error:function(XmlHttpRequest,textStatus,errorThrown){  
             alert("编辑失败了");
         }
    })
    
})
 
jQuery(function($){
    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,
        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),
        xsize = $pcnt.width(),
        ysize = $pcnt.height();
    console.log('init',[xsize,ysize]);
    $('#hahahhah').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: 1,
     // aspectRatio: xsize / ysize,
      onRelease: clearCoords
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;
      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });          

<form id="itemForm" action="${pageContext.request.contextPath }/items/editItemsSubmit.action" method="post" enctype="multipart/form-data" >  

3、获取页面,神速初叶

    function updatePreview(c){
        
      if (parseInt(c.w) > 0){
        var rx = xsize / c.w;
        var ry = ysize / c.h;
        $pimg.css({
          width: Math.round(rx * boundx) 'px',
          height: Math.round(ry * boundy) 'px',
          marginLeft: '-' Math.round(rx * c.x) 'px',
        marginTop: '-' Math.round(ry * c.y) 'px'
        });
      }
      console.log([c.x,c.y,c.w,c.h]);
      $("#x").val(c.x);  
      $("#y").val(c.y);  
      $("#w").val(c.w);  
      $("#h").val(c.h);
    };
function clearCoords(){
      $('#coords input').val('');
    };
  });
</script>

本文由韦德国际1946发布于韦德国际1946手机版,转载请注明出处:springMVC文件上传,springMVC上传图片

关键词: JAVA