Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
06 Июл 2023
2 мин
324

Асинхронная загрузка файлов с помощью jQuery

Одной из распространенных проблем, с которой сталкиваются новички при работе с jQuery, является асинхронная загрузка файлов. Особенно это становится

Одной из распространенных проблем, с которой сталкиваются новички при работе с 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-запрос будет содержать не просто имя файла, а целиком файл, что и требуется для его загрузки на сервер.

Добавить комментарий

Подарок
Забрать подарок