ajaxからのマルチパートリクエストをフォームのないスプリングコントローラに送信しますか？

Question

私はデスクトップから画像をアップロードし、この画像をJavaScriptのベースコードに変換しています。その後、この画像ベースコードをマルチパートリクエストでスプリングコントローラに送信したいと思います。しかし、私はフォームを使用していません。

HTML

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL()"> 

JAVA SCRIPT

window.photoCakeUrl = '<c:url value="/media/image/upload"/>'; 
     function encodeImageFileAsURL() { 
       var filesSelected = document.getElementById("inputFileToLoad").files; 
       if (filesSelected.length > 0) { 
        var fileToLoad = filesSelected[0]; 
        var fileReader = new FileReader(); 
        fileReader.onload = function (fileLoadedEvent) { 
         var srcData = fileLoadedEvent.target.result; // <--- data: base64 
         var newImage = document.createElement('img'); 
         var photoCake = srcData; 
         newImage.src = srcData; 
         document.getElementById("imgTest").innerHTML = newImage.outerHTML; 
         var ajax1 = $.ajax({ 
          type: 'POST', 
          url: photoCakeUrl, 
          processData: false, // important 
          contentType: false, // important 
          dataType: 'json', 
          data: {photoCak: photoCake} 
         }); 

         }); 

        }, 
          fileReader.readAsDataURL(fileToLoad); 
       } 
      } 

SPRINGのCONTROLLER：

@RequestMapping(value = "/media/image/upload", method = RequestMethod.POST) 
    @ResponseBody 
    public Map<String, String> productPictureUploadnew(MultipartHttpServletRequest request, HttpServletResponse response) { 
     Map<String, String> resp = new HashMap<>(); 
     String photoCake = request.getParameter("photoCak"); 


     System.out.println("photoCake " + photoCake); 

     return resp; 
    } 

しかし、ときに私が属していますAJAXコールを呼び出すと500エラーが発生します。私は単純に使用している場合

public Map<String, String> productPictureUploadnew(HttpServletRequest 
request, HttpServletResponse response) 

それが動作します。私が使用しているときに意味するMultipartHttpServletRequest場所HttpServletRequest 要求それは動作しません。

Answer 1

私は解決策を持って、私たちはMultipartHttpServletRequestを送信するためにどのJSPにフォームを使用せずにJavaScriptでFORMDATAを使用することができます。

window.photoCakeUrl = '<c:url value="/media/image/upload"/>'; 
     function encodeImageFileAsURL() { 
       var filesSelected = document.getElementById("inputFileToLoad").files; 
       if (filesSelected.length > 0) { 
        var fileToLoad = filesSelected[0]; 
        var fileReader = new FileReader(); 
        fileReader.onload = function (fileLoadedEvent) { 
         var srcData = fileLoadedEvent.target.result; // <--- data: base64 
         var newImage = document.createElement('img'); 
         var photoCake = srcData; 
         newImage.src = srcData; 
         document.getElementById("imgTest").innerHTML = newImage.outerHTML; 

         var formData = new FormData(); 
         formData.append("imgFile", document.getElementById("inputFileToLoad").files[0]); 

         var ajax1 = $.ajax({ 
          type: 'POST', 
          url: photoCakeUrl, 
          dataType: 'json', 
          data: {photoCak: photoCake} 
         }); 

         }); 

        }, 
          fileReader.readAsDataURL(fileToLoad); 
       } 
      } 

VAR FORMDATA =新しいいるFormData（）。
formData.append（ "imgFile"、document.getElementById（ "inputFileToLoad"）。files [0]）;

コントローラー：

@RequestMapping(value = "/media/image/upload", method = RequestMethod.POST) 
     @ResponseBody 
     public Map<String, String> productPictureUploadnew(MultipartHttpServletRequest request, HttpServletResponse response) { 
      Map<String, String> resp = new HashMap<>(); 
      System.out.println("fsasasafsafsafsafsa"); 
      Iterator<String> itr = request.getFileNames(); 

      String photoCake = request.getParameter("photoCak"); 
      File file; 
      ---------- 
      ------- 
      ----------    

      return resp; 
     } 

おかげで、あなたは、私はこれがあなたたちのための完全な助けであると思います。

Answer 2

multipart/form-dataとして送信しているため、HttpServletRequestがデータを取得できないため、ajax呼び出しからcontentTypeオプションを削除してからjqueryがdefaylt wizを使用します。 'application/x-www-form-urlencoded;文字セットは= UTF-8'

var ajax1 = $.ajax({ 
         type: 'POST', 
         url: photoCakeUrl, 
         processData: false, // important 
         dataType: 'json', 
         data: {photoCak: photoCake} 
        }); 

Answer 3

これは私がそれを行っているだろうかです：

window.photoCakeUrl = '<c:url value="/media/image/upload"/>'; 
window.URL = window.URL || window.webkitURL 

function encodeImageFileAsURL() { 
    var filesSelected = $('#inputFileToLoad')[0].files; 

    if (filesSelected.length) { 
    var fileToLoad = filesSelected[0]; 
    var img = new Image(); 
    var formData = new FormData(); 

    formData.append('imgFile', fileToLoad); 

    img.onload = function() { 
     // only append the image once it's loaded so we don't append broken images 
     $('#imgTest').html(this); 
     URL.revokeObjectURL(this.src); // Release memory 
     // Uploading a image when we can ensure it's a image that can be loaded 
     fetch(photoCakeUrl, {method: 'POST', body: formData}); 
    } 

    img.onerror = function() { 
     // You didn't upload a image 
    } 

    img.src = URL.createObjectURL(srcData); 
    } 
} 

• URL.createObjectURLはfasterであり、また、それが保存されているので、〜3倍の大きさが大きく、2倍より多くのメモリを使用している長いbase64文字列その後、少ないメモリを使用していますUTF16とUTF8ない
• にあなたはその後、私はまたFetchの代わりを使用することになりcreateElement('img')
• のよりよいソーターバージョンであるnew Imageを使用することができますjQueryのcuzの210は、その後、私はまた、あなたがマルチパートリクエストを送信していない