javascript - open - Envíe un archivo como multiparte a través de xmlHttpRequest

xmlhttprequest post json

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 de XHR").

Dado este HTML,

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

puedes subirlo de la siguiente manera:

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

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

XHR se ocupará de los encabezados adecuados y solicitará la codificación del cuerpo y, en este ejemplo, el archivo estará disponible en el lado del servidor como parte del form-data con el nombre myFile .

FormData tener en cuenta que la API FormData 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 complemento jQuery Form . Toda su forma, cuando se escribe y funciona correctamente sin ninguna línea de código JavaScript, se ajactará instantáneamente con solo la siguiente línea:

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

También es compatible con las cargas de archivos por un truco iframe oculto. Consulte también esta documentación de jQuery Form para obtener una explicación detallada. Es posible que solo necesite cambiar el código del servlet para poder interceptar las solicitudes normales (sincrónicas) y ajax (asincrónicas). Ver también esta respuesta para un ejemplo concreto: Calculadora simple con JSP / Servlet y Ajax

De cualquier manera, el archivo cargado debería estar disponible en el método doPost() de un servlet @MultipartConfig siguiente manera:

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

O si todavía tiene Servlet 2.5 o una versión anterior, use Apache Commons FileUpload de la forma habitual. Ver también esta respuesta para un ejemplo concreto: ¿Cómo subir archivos al servidor usando JSP / Servlet?

Answer 2

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

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