diff --git a/recipes/progress/index.md b/recipes/progress/index.md index 77814170fa..a17c3adcfd 100644 --- a/recipes/progress/index.md +++ b/recipes/progress/index.md @@ -271,7 +271,7 @@ function errorHandler() { -Было бы удобно иметь возможность тестировать наше решение изолировано (без реализации кода серверной части).Для этого можно добавить функцию симуляции загрузки, предусмотрев вариант завершения загрузки в результате ошибки. Следующий пример демонстрирует этот подход. +Было бы удобно иметь возможность тестировать наше решение изолированно (без реализации кода серверной части). Для этого можно добавить функцию симуляции загрузки, предусмотрев вариант завершения загрузки в результате ошибки. Следующий пример демонстрирует этот подход. @@ -425,9 +425,10 @@ const statusText = form.querySelector('.form-upload__status') const progressBar = form.querySelector('#progressBar') ``` -Приступим к определению служебных функций. Вызов этих функций будет осуществляться с помощью обработчиков событий. Такое разделение логики, позволяет легче ориентироваться в кодовой базе, избегать дублирования кода и упрощает дальнейшие модификации. +Приступим к определению служебных функций. Вызов этих функций будет осуществляться с помощью обработчиков событий. Такое разделение логики позволяет легче ориентироваться в кодовой базе, избегать дублирования кода, и упрощает дальнейшие модификации. Создадим функцию сброса состояния загрузки, это понадобится для очистки информации о предыдущих загрузках: + ```js function resetProgress(status = '') { statusText.textContent = status @@ -436,7 +437,7 @@ function resetProgress(status = '') { } ``` -Рассмотрим функцию отправки данных. Параметром функции является выбранный для отправки файл. Чтобы отправить файл на сервер без перезагрузки страницы, воспользуемся `XMLHttpRequest` — набором механизмов для обмена данными между клиентом и сервером без перезагрузки. Более подробно о нём можно почитать на [странице документации MDN](https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest). +Рассмотрим функцию отправки данных. Параметром функции является выбранный для отправки файл. Чтобы отправить файл на сервер без перезагрузки страницы, воспользуемся `XMLHttpRequest` — набором механизмов для обмена данными между клиентом и сервером. Более подробно о нём можно почитать на [странице документации MDN](https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest). Инициализируем необходимые объекты: - `formSent` - объект `FormData`, в котором будут храниться данные для отправки; @@ -451,7 +452,7 @@ const xhr = new XMLHttpRequest() После этого устанавливаем параметры `XMLHttpRequest`: - для `XMLHttpRequestUpload` добавляется обработчик события `progress`, который выполняет отслеживание состояния загрузки файла; - для `XMLHttpRequest` добавляются обработчики событий `load` и `error` позволяющие отслеживать результат загрузки; -- метод `open()` инициализирует POST-запрос к управляющему файлу, который хранится на сервере; +- метод `open()` инициализирует POST-запрос к управляющему файлу, который хранится на сервере. Отправка данных выполняется с помощью метода `send()`. @@ -501,6 +502,7 @@ fileInput.addEventListener('change', function () { ``` После нажатия кнопки «Загрузить файл» происходит событие `submit`. В обработчике этого события мы проверяем что файл выбран и вызываем функцию `upload()`, отвечающую за отправку данных на сервер. На время выполнения запроса блокируем возможность выбора и отправки нового файла. Если файл не выбран, оповещаем об этом пользователя: + ```js form.addEventListener('submit', function (event) { event.preventDefault() @@ -519,7 +521,7 @@ form.addEventListener('submit', function (event) { }) ``` -Выполнение запроса может завершиться как успешно так и в результате ошибки. С помощью обработчиков `loadHandler()` и `errorHandler()` определяем какую информацию о результате загрузки необходимо отобразить. После завершения загрузки разблокируем возможность отправки файлов: +Выполнение запроса может завершиться как успешно, так и ошибкой. С помощью обработчиков `loadHandler()` и `errorHandler()` определяем какую информацию о результате загрузки необходимо отобразить. После завершения загрузки разблокируем возможность отправки файлов: ```js function loadHandler(event) {