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