本文主要解決移動或者pc端上傳圖片及生成預覽的問題
1.jQuery 生成base64編碼,前臺預覽
2.jsp 自定義上傳按鈕兩種方式的上傳 input file 和 input hidden
3.java後臺兩種方式的上傳操作 SpringMvc自身的上傳機制和Base64解碼上傳的操作

jQuery程式碼:

<script type="text/javascript">

$(function(){

// 前端只需要給input file繫結這個change事件即可（下面兩個方法不需要修改）獲取到圖片
 $('.testUpload').bind('change',function
 
(event){
     var imageUrl = getObjectURL($(this)[0].files[0]);
     convertImgToBase64(imageUrl, function(base64Img){

        //base64Img為轉好的base64,放在img src直接前臺展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
        //alert(base64Img);
        $("#base").attr("src",base64Img);
        //base64轉圖片不需要base64的字首data:image/jpg;base64
 

        //alert(base64Img.split(",")[1]);
         $("#uploadFile").val(base64Img.split(",")[1]);
      });
      event.preventDefault(); 
  }); 

//生成圖片的base64編碼
function convertImgToBase64(url, callback, outputFormat){ 
     //html5 的convas畫布
     var canvas = document.createElement('CANVAS'); 
     var
 
 ctx = canvas.getContext('2d'); 
     var img = new Image; 
     img.crossOrigin = 'Anonymous'; 
     img.onload = function(){
       var width = img.width;
       var height = img.height;
       // 按比例壓縮4倍
       //var rate = (width<height ? width/height : height/width)/4;
       //原比例生成畫布圖片
       var rate = 1;
       canvas.width = width*rate; 
       canvas.height = height*rate; 
       ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate); 
 // canvas.toDataURL 返回的是一串Base64編碼的URL，當然,瀏覽器自己肯定支援 
        var dataURL = canvas.toDataURL(outputFormat || 'image/png'); 
        callback.call(this, dataURL); 
        canvas = null; 
      };
      img.src = url; 
    }

//createobjecturl()靜態方法建立一個包含了DOMString代表引數物件的URL。該url的宣告週期是在該視窗中.也就是說建立瀏覽器建立了一個代表該圖片的Url.
function getObjectURL(file) {
     var url = null ; 
      if (window.createObjectURL!=undefined){
     // basic
        url = window.createObjectURL(file) ;
      } else if (window.URL!=undefined){
     // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
      } else if (window.webkitURL!=undefined){
     //web_kit or chrome
        url = window.webkitURL.createObjectURL(file) ;
      }
      return url ;
     }
 </script>

Jsp程式碼

<!-- 把input file透明度設定為0,隱藏在圖片的後面實現自定義上傳按鈕 -->
<form id="uploadImg" method="post" enctype="multipart/form-data" action="${contextPath }/uploadImg.html">
  <div style='position:relative; '>
    <img id="base" style="position: absolute;" alt="上傳" src="${contextPath }/img/upload.jpg">
    <!-- 使用file上傳時,上傳的是一個file型別的檔案 到後臺 -->
    <input type="file" style="position:absolute; opacity:0;"  name="files" class="testUpload">
    <!-- 使用base64 上傳時,是把base64 編碼的字串傳入後臺 -->
    <input type="hidden"  name="baseFile" id="uploadFile">

  </div>
  <div id="subInfo" style="cursor:pointer;margin-left:50px; width: 100px; height: 40px; font-size: 16px; background-color: #2d78f4; color:#FFFFFF; text-align: center; border: 1px solid #2129FB; " >
     <div style="height: 8px;" >&nbsp;</div>
            提交
   </div>

</form>

java程式碼

@RequestMapping("uploadImg")
public ModelAndView uploadImg(String[] baseFile, HttpServletRequest request) throws IllegalStateException, IOException{

    ModelAndView mav = new ModelAndView();
    mav.setViewName("MyJsp");
    mav.addObject("mes", "Success!!!");

    /**
     * springMvc 上傳圖片
     * 1.enctype屬性的屬性值設為multipart/form-data。
     * 2.input的type屬性的屬性值設為file。
     * 後臺就可以使用multipartResolver獲取到前臺上傳的檔案
     */
    /*
    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
    if(multipartResolver.isMultipart(request)){
        MultipartHttpServletRequest multipertRequest = (MultipartHttpServletRequest)request;
        Iterator<String> iter = multipertRequest.getFileNames();
        //上傳一張圖片時可以直接使用這個
        //MultipartFile file11 = multipertRequest.getFile("files");
        //上傳多張圖片
        while (iter.hasNext()) {
            MultipartFile file = multipertRequest.getFile((String)iter.next());
            if(!file.isEmpty()){
                String path = request.getSession().getServletContext().getRealPath("uploadImg");
                String imageName = this.getImageName();
                //File.separator路徑分隔符
                File savefile = new File(path+File.separator+imageName);
                //file.transferTo將上傳的檔案寫入指定位置
                file.transferTo(savefile);
                }
            }
    }*/


   /**
    * Base64 上傳圖片
    */
  String path = request.getSession().getServletContext().getRealPath("uploadImg");
  Base64 base64 =  new Base64();
  String[] imageNames = new String[baseFile.length];
  //file 為前臺隱藏域裡面的字串
  if(baseFile!= null && baseFile.length!=0){
      int index = 0;
      for (String base64Str : baseFile) {
        //base64 解碼
          byte[] byteArray = base64.decode(base64Str);
          // 調整異常資料  
          for (byte b : byteArray) {
              if(b<0)
                  b+=256;
          }
          String imageName = this.getImageName();
          try {
              OutputStream out = new FileOutputStream(path+File.separator+imageName);
              out.write(byteArray);
              out.close();
          } catch (Exception e) {
              e.printStackTrace();
              System.out.println(imageNames[0]); 
          }
          imageNames[index] = path+File.separator+imageName;
          index ++ ;
      }
  }
      System.out.println(imageNames[0]); 

return mav;
}

/**
  * 根據系統規則得到圖片名稱
  */
  public String getImageName(){
      return UUID.randomUUID().toString()+".jpg";
  }