javascript 은 base 64 인 코딩 된 그림 데 이 터 를 file 로 변환 하여 제출 합 니 다.

base 64 인 코딩 이미지 데 이 터 를 직접 제출 하면 배경 에 퍼 가기 오류 가 발생 할 수 있 습 니 다.base 64 인 코딩 된 그림 데 이 터 를 Blob (File 과 비슷) 로 변환 하여 form 에 추가 하 는 것 이 좋 은 해결 방법 입 니 다.다음은 코드:

  /**
   * @param base64Codes
   *               base64  
   */
  function sumitImageFile(base64Codes) {
   var form = document.forms[0];
   var formData = new FormData(form); /**    form            ,               FormData        **/
   /**convertBase64UrlToBlob    base64     Blob**/
   formData.append("imageName", convertBase64UrlToBlob(base64Codes)); /**append                   , html   input name      **/
   /**ajax   form**/
   $.ajax({
    url : form.action,
    type : "POST",
    data : formData,
    dataType : "text",
    processData : false, /**   jQuery          **/
    contentType : false, /**   jQuery     Content-Type   **/
    success : function(data) {
     window.location.href = "${ctx}" + data;
    },
    xhr : function() { /** jquery       ajax XMLHttpRequest  **/
     var xhr = new XMLHttpRequest();
     xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
       var percentComplete = Math.round(evt.loaded * 100
         / evt.total);
       console.log("    ." + percentComplete.toString()
         + '%'); /**          **/
      }
     }, false);
     return xhr;
    }
   });
  }
  /**
   *   base64   url     Blob
   * @param urlData
   *             url     base64    
   */
  function convertBase64UrlToBlob(urlData) {
   var bytes = window.atob(urlData.split(',')[1]); /**  url  ，    byte**/
   /**    , ascii   0      0**/
   var ab = new ArrayBuffer(bytes.length);
   var ia = new Uint8Array(ab);
   for (var i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
   }
   return new Blob([ ab ], {
    type : 'image/png'
   });
  }