Отправить файл как multipart через xmlHttpRequest

Ответ 1

Это возможно только при использовании XHR FormData API (ранее известный как часть XHR2 или XHR Level 2, в настоящее время известный как "Расширенные функции XHR" ).

Учитывая этот HTML,

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

вы можете загрузить его, как показано ниже:

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

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

XHR позаботится о правильных заголовках и запросит кодирование тела, и файл в этом примере будет доступен на стороне сервера как form-data с именем myFile.

Вам нужно иметь в виду, что API FormData не поддерживается в старых браузерах. В caniuse.com вы можете увидеть, что он в настоящее время реализован в Chrome 7+, Firefox 3.5+, Safari 5+, IE 10+ и Opera 12+.

Альтернативой является использование плагина jQuery Form. Вся ваша форма, когда она будет написана и функционирует правильно без какой-либо строки кода JavaScript, сразу же будет очищена только следующей строкой:

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

Он также поддерживает загрузку файлов, а также скрытый трюк iframe. См. Также эту документацию формы jQuery для подробного объяснения. Вам может потребоваться изменить код сервлета, чтобы иметь возможность перехватывать как обычные (синхронные), так и ajax (асинхронные) запросы. См. Также этот ответ для конкретного примера: Простой калькулятор с JSP/Servlet и Ajax

В любом случае загруженный файл должен быть доступен в doPost() методе @MultipartConfig сервлет следующим образом:

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

Или, если вы все еще на Servlet 2.5 или старше, используйте Apache Commons FileUpload обычным способом. См. Также этот ответ для конкретного примера: Как загрузить файлы на сервер с помощью JSP/Servlet?

Ответ 2

Невозможно отправить multipart/form-data с xhr ( update:, хотя это возможно в современных браузерах с XHR2. См. ответ BalusC).

Общим способом достижения этого является то, что вы используете обычный form, но вместо этого в iframe. Таким образом, при загрузке обновляется только iframe.