Como fazer upload de arquivos para o servidor usando JSP / Servlet e Ajax?

Estou criando um aplicativo da Web JSP / Servlet e gostaria de carregar um arquivo em um Servlet via Ajax. Como eu iria fazer isso? Estou usando o jQuery.

Eu fiz até agora:

     

Com este jQuery:

 $(document).on("#upload-button", "click", function() { $.ajax({ type: "POST", url: "/Upload", async: true, data: $(".upload-box").serialize(), contentType: "multipart/form-data", processData: false, success: function(msg) { alert("File has been uploaded successfully"); }, error:function(msg) { $("#upload-error").html("Couldn't upload file"); } }); }); 

No entanto, não parece enviar o conteúdo do arquivo.

No ponto, a partir da atual versão XMLHttpRequest 1 usada pelo jQuery, não é possível fazer o upload de arquivos usando JavaScript através de XMLHttpRequest . A solução alternativa comum é permitir que o JavaScript crie um oculto e envie o formulário para ele, para que a impressão seja criada de forma assíncrona. Isso também é exatamente o que a maioria dos plugins de upload de arquivos do jQuery está fazendo, como o plugin jQuery Form ( exemplo aqui ).

Supondo que o seu JSP com o formulário HTML é reescrito de tal forma que não seja quebrado quando o cliente tiver JS desativado (como você tem agora …), como abaixo:

 
${uploadError}

Então é com a ajuda do plugin de formulário jQuery apenas uma questão de

    

Quanto ao lado do servlet, nenhuma coisa especial precisa ser feita aqui. Basta implementá-lo exatamente da mesma maneira que você faria quando não estiver usando o Ajax: Como fazer upload de arquivos para o servidor usando JSP / Servlet?

Você só precisará de uma verificação adicional no servlet se o header X-Requested-With igual a XMLHttpRequest ou não, para que você saiba como o tipo de resposta a ser retornado para o caso de o cliente ter o JS desativado (a partir de agora, são principalmente os navegadores móveis mais antigos que possuem o JS desativado).

 if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) { // Return ajax response (eg write JSON or XML). } else { // Return regular response (eg forward to JSP). } 

Observe que a versão 2 do XMLHttpRequest relativamente nova é capaz de enviar um arquivo selecionado usando as novas APIs File e FormData . Consulte também Upload de Arquivo HTML5 para Servlet Java e enviando um arquivo como multipartes por meio de xmlHttpRequest .

Este código funciona bem para mim:

 $('#fileUploader').on('change', uploadFile); function uploadFile(event) { event.stopPropagation(); event.preventDefault(); var files = event.target.files; var data = new FormData(); $.each(files, function(key, value) { data.append(key, value); }); postFilesData(data); } function postFilesData(data) { $.ajax({ url: 'yourUrl', type: 'POST', data: data, cache: false, dataType: 'json', processData: false, contentType: false, success: function(data, textStatus, jqXHR) { //success }, error: function(jqXHR, textStatus, errorThrown) { console.log('ERRORS: ' + textStatus); } }); } 
 

@ O código do Monsif funciona bem se o formulário tiver apenas inputs de tipo de arquivo, se houver outras inputs além do tipo de arquivo, elas serão perdidas. Portanto, em vez de copiar cada dado do formulário e anexá-los ao object FormData, o próprio formulário original pode ser fornecido ao construtor.

Em relação ao código do @ Monsif e https://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata/ post, eu saí com o seguinte código que trabalhou para mim. Espero que ajude alguém.

  

O código html pode ser algo como seguir:

 
First name:

Last name:


Este código funciona para mim.

Usado commons io.jar & commons file upload.jar e o plugin de formulário jQuery

  
 
${uploadError}