Отправить файл как составную часть через xmlHttpRequest
Могу ли я отправить файл как составной XMLHttpRequest сервлету? Я делаю форму и отправляю ее как составную часть, но почему-то не получаю ответа для успешной загрузки. Я не хочу, чтобы страница обновлялась, поэтому она должна выполняться с помощью ajax.
2 ответа
Это возможно только с 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 не поддерживается в старых браузерах. На сайте http://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?
Не возможно отправить multipart/form-data с xhr (обновление: хотя это возможно в современных браузерах, с XHR2, Смотрите ответ BalusC).
Распространенный способ добиться того, чего вы хотите - это использовать обычный form, но в iframe вместо. Таким образом, только iframe обновляется при загрузке.