Caricamento del file ajax mvc di primavera con conseguente 415 (tipo di supporto non supportato)

Question

Sto cercando di caricare file utilizzando il metodo jquery ajax. ma sta causando l'errore 415 (tipo di supporto non supportato) sul client side.but con richiesta non-ajax il mio codice funziona correttamente.

Il mio codice di controllo.

@RequestMapping(value = "/imageUpload", headers = "content-type=multipart/*", method = RequestMethod.POST, consumes = "application/json") 
public @ResponseBody 
String uploadImage(@RequestParam("fileData") MultipartFile multipartFile, HttpServletRequest request) 
{ 
     // statements 
} 

mio avviso pagina

<form id="uploadForm" action="imageUpload" method="post" enctype="multipart/form-data"> 
    <div> 
     <input type="file" id="fileData" name="fileData" /> 
     <input type="submit" id="submitContent" value="upload" /> 
    </div> 
</form> 

e chiamata AJAX.

$("#uploadForm").submit(function (e) { 
    e.preventDefault(); 
       var $form = $("#uploadForm");     
       $.ajax({ 
        type: $form.attr('method'), 
        url: $form.attr('action'),     
        data: $form.serialize(), 
        dataType : 'json', 
        enctype: 'multipart/form-data', 
        processData: false,      
        success: function(msg){ 
         $("#editor").append(msg); 
        }, 
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
         alert("Status: " + XMLHttpRequest); alert("Status: " + textStatus); alert("Error: " + errorThrown); 
        } 
        }); 
}); 

Ho provato parecchie cose come l'impostazione contentType: falsi. quindi si prega di suggerire eventuali modifiche se necessario.

Answer 1

Date un'occhiata a questo Sending files using a FormData object

dati da elemento di file non è serializzato, utilizzare new FormData() per inizializzare i dati e quindi aggiungere i tuoi elementi del modulo, tra cui l'elemento data. Questo codice funzionerà

$("#uploadForm").submit(function(e) { 
    e.preventDefault(); 
    var $form = $("#uploadForm"); 
    var fd = new FormData($(this)[0]); 
    console.info(fd); 
    $.ajax({ 
     type : 'POST', 
     url : $form.attr('action'), 
     data : fd, 
     cache : false, 
     processData : false, 
     contentType : false, 
     success : function(response) { 
      console.info(response); 
     }, 
     error : function(XMLHttpRequest, textStatus, errorThrown) { 
      console.info("Status: " + XMLHttpRequest); 
      alert("Status: " + textStatus); 
      alert("Error: " + errorThrown); 
     } 
    }); 
}); 

Per aggiungere altre variabili form usano fd.append(...)