Ответ 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?