Enviar un archivo como multiparte a través de xmlHttpRequest

Question

¿Puedo enviar un archivo como multiparte por XMLHttpRequest a un servlet? Estoy elaborando un formulario y presentándolo como multiparte, pero de alguna manera no recibo una respuesta por cargarlo con éxito. No quiero que la página se actualice, por lo que tiene que llevarse a cabo por ajax.

Answer 1

Eso solo es posible con XHR FormData API (anteriormente conocido como "XHR2" o "XHR Nivel 2", actualmente conocido como "Funciones avanzadas XHR").

Teniendo en cuenta este código HTML,

<input type="file" id="myFileField" name="myFile" /> 

puede subirlo a continuación:

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

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "myServletUrl"); 
xhr.send(formData); 

XHR cuidará sobre los encabezados apropiados y solicitud cuerpo codificación y el archivo será en este ejemplo estará disponible en el lado del servidor como form-data parte con el nombre myFile.

Debe tener en cuenta que FormData API no es compatible con navegadores más antiguos. En caniuse.com puedes ver que actualmente está implementado en Chrome 7+, Firefox 3.5+, Safari 5+, IE 10+ y Opera 12+.

Una alternativa es usar el jQuery Form plugin. Su forma entera, cuando se escribe y funciona correctamente sin ninguna línea de código JavaScript, entonces inmediatamente se Ajaxified con sólo la línea siguiente:

$("#formId").ajaxForm(function(response) { 
    // Handle ajax response here. 
}); 

También soporta la carga de archivos a su vez por un truco iframe oculto. Vea también this jQuery Form documentation para una explicación en profundidad. Es posible que solo necesite cambiar el código del servlet para poder interceptar las solicitudes normales (sincrónicas) y ajax (asincrónicas). Véase también la respuesta de un ejemplo concreto: Simple calculator with JSP/Servlet and Ajax

De cualquier manera, el archivo cargado debe entonces estar disponibles en el método de un servlet @MultipartConfigdoPost() de la siguiente manera:

Part myFile = request.getPart("myFile"); 

o si está todavía en Servlet 2.5 o mayor, use Apache Commons FileUpload de la forma habitual. Vea también esta respuesta para un ejemplo concreto: How to upload files to server using JSP/Servlet?

Answer 2

No es posible enviar multipart/form-data con xhr (actualización. aunque es posible en los navegadores modernos, con XHR2 Véase la respuesta de BalusC).

Una forma común de lograrlo es usar un form normal, pero en su lugar iframe. De esta manera, solo el iframe se actualiza al cargarlo.