Envoie une requête multipart depuis ajax au contrôleur de ressort sans form?

Question

Je télécharge une image à partir du bureau et convertis cette image en code de base en javascript. Après cela, je veux envoyer ce code de base d'image au contrôleur de printemps avec la demande multipart. Mais je n'utilise pas de formulaire.

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); 
       } 
      } 

PRINTEMPS CONTRÔLEUR:

@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; 
    } 

Mais quand je suis genres ting appel AJAX puis erreur 500 viendra. Si j'utilise simplement

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

Ensuite, cela fonctionne. Moyenne lorsque j'utilise MultipartHttpServletRequest place de HttpServletRequest demande alors il ne fonctionne pas.

Answer 1

Je suis solution, nous pouvons utiliser formData en javascript sans utiliser la forme dans une JSP d'envoyer MultipartHttpServletRequest.

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 = new FormData();
formData.append ("imgFile", document.getElementById ("inputFileToLoad"). Fichiers [0]);

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<>(); 
      System.out.println("fsasasafsafsafsafsa"); 
      Iterator<String> itr = request.getFileNames(); 

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

      return resp; 
     } 

Merci vous, j'espère que cela est plein d'aide pour vous les gars.

Answer 2

Vous l'envoyez en tant que multipart/form-data peut-être que c'est pourquoi HttpServletRequest n'est pas en mesure d'obtenir vos données, supprimez l'option contentType de l'appel ajax puis jquery utilisera le wiz defaylt. 'application/x-www-forme-urlencodé; charset = UTF-8'

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

Answer 3

Voilà comment je l'aurais fait:

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 est faster et utilise moins de mémoire, puis une longue chaîne base64 qui est aussi ~ 3 fois plus grande taille et utilise 2x plus de mémoire car il est stocké dans utf16 et non UTF8
• Vous pouvez utiliser new Image qui est une version plus belle trieur de createElement('img')
• J'utiliserais aussi Fetch au lieu de $.ajax cuz jQuery poignée formData bêtement (besoin de mettre processData & contentType false)
• Puis j'ajouter aussi l'attribut accept="images/*" à l'entrée de fichier pour filtrer les images