[СДЕЛАЙ САМ] Добавляем отображение прогресса загрузки файлов в AjaxForm

Пишу себе на память, но вдруг кому-то тоже нужно. На 17-ю строку в этом файле assets/components/ajaxform/js/default.js добавляем вот такой код
xhr: function() {
                    var xhr = new window.XMLHttpRequest(),
                        counter = 0;
                    //проверяем есть ли в форме файлы
                    $('input[type="file"]').each(function(){
                        if($(this).val()){
                            counter++;
                        }
                    });
                    if(counter){
                        xhr.upload.onprogress = function(event) {
                            //как выводить прогресс каждый может решить сам.
                            $('.jsMsgSuccess').text('Загружено на сервер ' + Math.ceil(event.loaded / event.total * 100) + '%' );
                        }
                        
                        xhr.upload.onload = function() {
                             AjaxForm.Message.success('Данные полностью загружены на сервер!' );
                             $('.jsMsgSuccess').text('');
                        }
                        
                        xhr.upload.onerror = function() {
                             AjaxForm.Message.error('Произошла ошибка при загрузке данных на сервер!');
                             $('.jsMsgSuccess').text('');
                        }
                         
                    }
                    return xhr;
                },
Артур
01 декабря 2020, 13:49
modx.pro
3
329
+1
Поблагодарить автора Отправить деньги

Комментарии: 2

unreal_serg
14 декабря 2020, 00:24
0
Ха, буквально, недавно примерно точно-также сделал прогресс бар для файлов!
    Артур
    14 декабря 2020, 02:14
    0
    Это хорошо для юзабилити, я бы не дал, но рядовой пользователь не поймёт, что файлы загружаются, если не показать процесс)))
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    2