Одной из распространенных проблем, с которой сталкиваются новички при работе с jQuery, является асинхронная загрузка файлов. Особенно это становится актуальным при создании интерактивных веб-страниц, где требуется возможность загрузки файлов без перезагрузки страницы.
Предположим, есть следующий код:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>
$(document).ready(function () {
$("#uploadbutton").click(function () {
var filename = $("#file").val();
$.ajax({
type: "POST",
url: "addFile.do",
enctype: 'multipart/form-data',
data: {
file: filename
},
success: function () {
alert("Data Uploaded: ");
}
});
});
});
В этом коде при нажатии на кнопку «Upload» вызывается AJAX-запрос на сервер, в котором передается имя загружаемого файла. Однако вместо ожидаемой загрузки файла на сервер, в результате его выполнения на сервер отправляется только имя файла. Так происходит потому, что в AJAX-запросе передается лишь строковое значение поля для выбора файла, а не сам файл.
Чтобы исправить эту ситуацию, можно использовать объект FormData. Этот объект позволяет создавать наборы ключ/значение и передавать их в виде данных формы через AJAX-запрос.
Пример исправленного кода:
$(document).ready(function () {
$("#uploadbutton").click(function () {
var file_data = $("#file").prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
type: "POST",
url: "addFile.do",
enctype: 'multipart/form-data',
data: form_data,
processData: false, // отключаем обработку передаваемых данных, мы передаем blob файл
contentType: false, // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
success: function () {
alert("Data Uploaded: ");
}
});
});
});
Таким образом, при использовании объекта FormData AJAX-запрос будет содержать не просто имя файла, а целиком файл, что и требуется для его загрузки на сервер.
Добавить комментарий