头像预览并上传

java 代码

@RequestMapping(value = "/contributions",method = RequestMethod.POST)  

    @ResponseBody
    public void profile_imgCut(HttpServletResponse response,HttpServletRequest request, Model model,Article article,String info) {
Result result=new Result();
try {
            // 存储目录
            String realDir = request.getSession().getServletContext().getRealPath("/")+IMAGE;
            File realDirFile = new File(realDir);
            if (!realDirFile.exists()) {
                realDirFile.mkdirs();
            }
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;  

       Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();  

//判断是否有文件

       if (fileMap.size()==0) {
       
       
}else{
String filePath="";
String fileName = null;  
       for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {  
        // 上传文件 
        MultipartFile mf = entity.getValue();  
        fileName = mf.getOriginalFilename();

        String suffixName = FilenameUtils.getExtension(fileName);

//判断文件格式

        if ("gif".equalsIgnoreCase(suffixName) || "jpg".equalsIgnoreCase(suffixName)
                       || "jpeg".equalsIgnoreCase(suffixName) || "bmp".equalsIgnoreCase(suffixName)
                       || "png".equalsIgnoreCase(suffixName)) {
        String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
        // 重命名文件
        SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
        String newFileName = df.format(new Date()) + "." + fileExt;
            File uploadFile = new File(realDir + "/"+newFileName);  
            //要存储在数据库中的路径
            filePath = IMAGE+"/"+newFileName;
            try {
            //业务逻辑
               
            result.setSuccess(true);
                result.setInfo("投稿成功，请等待管理员审核");
                FileCopyUtils.copy(mf.getBytes(), uploadFile);
           } catch (Exception exception) {
            System.out.println(exception.getMessage());
            result.setSuccess(false);
                    result.setInfo("未知错误，请重新上传！");
           }
               } else {
                result.setSuccess(false);
                result.setInfo("非图片格式，请重新上传！");
               }
      }
}
        } catch (Exception e) {
        System.out.println(e.getMessage());
        result.setSuccess(false);
        result.setInfo("未知错误，请重新上传！");
        }

        writeJson(response, result);

}

html 代码

<div class="imgMain" id="imgUploadArea" style="margin-top: 30%;">
<div class="preview">
<img src="${ctxsta}/front/image/noImg.png" id="theirimage"> 
</div>
<div class="preview" style="width: 250px;margin-left: 10px;">
<img src="" id="myimage"> 
</div>
<div class="controlArea" style="width: 100px;float: right">
<div class="file-box">
<div id="loading_img" style="display: none;">正在上传...</div>
<div>
<input id="upload_btn" type="button" class="btn" value='选择图片' />
</div>
<input id="btn1" type="file" accept="image/*,camera" name="filetoupload" capture="camera" style="opacity: 0;"/>
<p>
<input id="deleteImg" type="button" value="删除" class="btn" />
</p>
<p>
<input id="info" type="text" placeholder="请输入图片描述" style="height:24px;border:1px #494949 solid;display: none"/>
</p>
</div>
</div>
</div>

js代码

这里使用的是cropper控件

// 图片上传
  var $image = $('#theirimage');
  $image.cropper({
      viewMode: 1,
// preview: '.img-preview', //不同尺寸预览区
      aspectRatio: 1.6/1, // 裁剪比例，NaN-自由选择区域
      autoCropArea: 0.7, // 初始裁剪区域占图片比例
      crop: function(data) { 
     var canVas = $image.cropper("getCroppedCanvas", {});
          // 将裁剪的图片加载到face_image
          $('#myimage').attr('src', canVas.toDataURL());
      }
  });

var fileName; // 选择上传的文件名
  $('#btn1').change(function(){
 $("#info").show();
      var file = this.files[0];
      fileName = file.name;
      var reader = new FileReader();
      // reader回调，重新初始裁剪区
      reader.onload = function(){
          // 通过 reader.result 来访问生成的 DataURL
          var url = reader.result;
          // 选择图片后重新初始裁剪区
          $image.cropper('reset', true).cropper('replace', url);
      };
      reader.readAsDataURL(file);
  });

上传ajax

$("#poste").attr("enctype","multipart/form-data");  
 var type = $image.attr('src').split(';')[0].split(':')[1];
     var canVas = $image.cropper("getCroppedCanvas", {});
     // 将裁剪的图片加载到face_image
     $('#myimage').attr('src', canVas.toDataURL());
     if (canVas.toBlob) {
     canVas.toBlob(function(blob) {
         var formData = new FormData();
         formData.append("file", blob, fileName);
         formData.append("info",$('#info').val());
         formData.append("content",ue.getContent());
         formData.append("categoryId",$('#categoryId').val());
         formData.append("author",$('#author').val());
         formData.append("email",$('#email').val());
         formData.append("source",$('#source').val());
         formData.append("title",$('#title').val());
         $.ajax({
             type: "POST",
             url: ctx+'/front/contributions',
             data: formData,
             contentType: false, // 必须
             processData: false, // 必须
             dataType: "json",
             success: function(retJson){
             if(retJson.success){
             layer.msg(retJson.info, {
  shade : 0.3,
  time : 1500
  }, function() {
  window.location.href= ctx+'/front/index';
  });
             
             }else{
             layer.msg(retJson.info, {
    shade : 0.3,
    time : 1500
    });
             }
             
             },
             error : function() {
                
             }
         });
     }, type);
     }

在这里  toBlob方法在浏览器中的兼容不好，在谷歌浏览器中才能用  需要导入一个js文件 

具体参看  https://github.com/blueimp/JavaScript-Canvas-to-Blob

引入即可