Progress bar для файла в форме

31 Июля 2020 12:00 (Редактировано: 03 Августа 2020 14:56)

Столкнулся с такой ситуацией, когда к форме нужно прикрепить файл, но на мобильных устройствах в условиях медленного интернета, форма могла очень долго отправляться (особенно, если файл большой) и сбить с толку посетителя сайта.

В таких ситуациях спасает прогресс бар и прикрутить его к ajaxForm не сложно.

Добавляем в форму тег progress и скрываем его, чтобы, по умолчанию, его не было видно.

HTML

<label for="file__upload"><input data-max-file-size="5242880" id="file__upload" class="input__file" type="file" name="file">Прикрепить файл</label>
<progress id="progressBar" value="0" max="100" style="display: none; width: 300px"></progress>

Далее нам нужно модернизировать отправку формы модуля ajaxForm. Открываем файл project.com\assets\components\ajaxform\js\default.js. Ищем там раздел отправки формы, он начинается с 15 строки такой конструкцией: ... $(document).off('submit', ....

Добавляем туда метод xhr со следующим содержимым:

JS(jquery)

$(document).off('submit', afConfig['formSelector']).on('submit', afConfig['formSelector'], function (e) {
  $(this).ajaxSubmit({
    xhr: function() {
      let xhr = $.ajaxSettings.xhr();

      let input = document.getElementById("file__upload");
      let progress = document.getElementById("progressBar");

      if(input != null && input.value != "") {
        progress.style.display = "block";
        xhr.addEventListener('progress', function (evt) {
          if (evt.lengthComputable) {
            let percentComplete = Math.ceil(evt.loaded / evt.total * 100);
            progress.value = percentComplete;
          }
        }, false);
      }
      return xhr;
    },
    ...

Метод xhr позволяет скорректировать обработку ajax-запросов в jquery. 

  • 4 строка. Получаем объект xhr текущей формы.
  • 6 - 7 строки. Получаем элементы с инпутом и прогресс баром.
  • 9 строка. Делаем проверку на наличие этих полей (на случай если форма без файла).
  • 10 строка. Открываем для просмотра прогресс бар;
  • 11 - 16 строки. Делаем магию с добавлением прогресса в прогресс бар.

Примечание. Этот метод xhr должен всегда возвращать объект xhr текущей формы, иначе форма крашнется.