Отправить файл как multipart через xmlHttpRequest - PullRequest
Новая
       6

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

24 голосов
/ 22 февраля 2012

Могу ли я отправить файл как составной элемент XMLHttpRequest сервлету?Я делаю форму и отправляю ее как составную часть, но почему-то я не получаю ответ за успешную загрузку.Я не хочу, чтобы страница обновлялась, поэтому она должна выполняться с помощью ajax.

Ответы [ 2 ]

58 голосов
/ 22 февраля 2012

Это возможно только с 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.

Необходимо помнить, что FormData API не поддерживается в старых браузерах. На 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 Form для подробного объяснения. Вам может потребоваться только изменить код сервлета, чтобы иметь возможность перехватывать как обычные (синхронные), так и ajax (асинхронные) запросы. См. Также этот ответ для конкретного примера: Простой калькулятор с JSP / Servlet и Ajax

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

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

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

3 голосов
/ 22 февраля 2012

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

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

...