¿Cómo subir archivos al servidor usando JSP / Servlet y Ajax?

Estoy creando una aplicación web JSP / Servlet y me gustaría subir un archivo a un servlet mediante Ajax. ¿Cómo voy a hacer esto? Estoy usando jQuery.

Lo he hecho hasta ahora

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

Sin embargo, no parece enviar el contenido del archivo.

Hasta el punto, a partir de la versión 1 de XMLHttpRequest actual utilizada por jQuery, no es posible cargar archivos usando JavaScript a través de XMLHttpRequest . La solución común es permitir que JavaScript cree un oculto y enviarlo en su lugar para que la impresión se cree que ocurre de forma asincrónica. Eso también es exactamente lo que hacen la mayoría de los complementos de carga de archivos de jQuery, como el complemento jQuery Form ( ejemplo aquí ).

Suponiendo que su JSP con el formulario HTML se reescribe de tal manera que no se rompa cuando el cliente tiene JS deshabilitado (como lo ha hecho ahora …), como a continuación:

 
${uploadError}

Entonces es con la ayuda del plugin jQuery Form solo una cuestión de

    

En cuanto al lado del servlet, no es necesario hacer nada especial aquí. Simplemente impleméntelo exactamente de la misma forma que lo haría cuando no utiliza Ajax: ¿Cómo subir archivos al servidor usando JSP / Servlet?

Solo necesitará una comprobación adicional en el servlet si el encabezado X-Requested-With es igual a XMLHttpRequest o no, para que sepa cómo responde el tipo de respuesta que el cliente tiene JS desactivado (a partir de ahora, en su mayoría son los navegadores móviles más antiguos que tienen JS deshabilitado).

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

Tenga en cuenta que la relativamente nueva XMLHttpRequest versión 2 es capaz de enviar un archivo seleccionado utilizando las nuevas API de File y FormData . Consulte también Carga de archivos HTML5 a Java Servlet y envío de un archivo como multiparte a través de xmlHttpRequest .

Este código funciona bien para mí:

 $('#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); } }); } 
 

El código de @ Monsif funciona bien si el formulario solo tiene entradas de tipo de archivo, si hay otras entradas además del tipo de archivo, entonces se pierden. Por lo tanto, en lugar de copiar los datos de cada formulario y anexarlos al objeto FormData, la forma original en sí misma se le puede dar al constructor.

En cuanto al código @ Monsif y https://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata/ post, saqué el siguiente código que trabajó para mi. Espero que ayude a alguien más.

  

El código html puede ser algo así como:

 
First name:

Last name:


Este código funciona para mí.

Usado el archivo commons io.jar & commons upload.jar y el complemento de formulario jQuery

  
 
${uploadError}