• Система автоматизации с открытым исходным кодом на базе esp8266/esp32 микроконтроллеров и приложения IoT Manager. Наша группа в Telegram

Помогите с Progressbarом

G

Goldz

Member
Есть progressbar
HTML: 
<div id="log"  style="position:absolute;width:294px;height:39px;">
<div id="log-label">25%</div>
</div>
Есть запрос к серверу на запись файла
JavaScript: 
upload.onclick = function(e) {
         let fileLen=document.getElementById("FiSe-file").files.length
         if(fileLen === 0){
            return;
          }
         var fileUp = document.getElementById("FiSe-file").files[0];
         let formData = new FormData();
         formData.append("file",fileUp );
         xmlHttp = new XMLHttpRequest();
         xmlHttp.open("POST", "/edit");
         xmlHttp.send(formData);
 
}
Как заставить работать прогрессбар в реальном времени, показывать степень загрузки ?
Не абстрактную анимацию, а отображать реальный процесс записи?
 
S

sboganov

Member
developer.mozilla.org

XMLHttpRequest.upload - Интерфейсы веб API | MDN

Свойство XMLHttpRequest.upload возвращает объект XMLHttpRequestUpload, представляющий процесс загрузки. Это непрозрачный объект, но так как он является XMLHttpRequestEventTarget, к нему можно добавить обработчики событий.
developer.mozilla.org developer.mozilla.org
stackoverflow.com

XMLHttpRequest and a progress bar?

I send a series of images and data using formData and an XMLHttpRequest, which uploads the data to a database and the images to S3. The problem I'm having though is the progress bar jumps to 100%
stackoverflow.com stackoverflow.com
 
G

Goldz

Member
sboganov написал(а):
developer.mozilla.org

XMLHttpRequest.upload - Интерфейсы веб API | MDN

Свойство XMLHttpRequest.upload возвращает объект XMLHttpRequestUpload, представляющий процесс загрузки. Это непрозрачный объект, но так как он является XMLHttpRequestEventTarget, к нему можно добавить обработчики событий.
developer.mozilla.org developer.mozilla.org
stackoverflow.com

XMLHttpRequest and a progress bar?

I send a series of images and data using formData and an XMLHttpRequest, which uploads the data to a database and the images to S3. The problem I'm having though is the progress bar jumps to 100%
stackoverflow.com stackoverflow.com
Нажмите для раскрытия...
Извиняюсь за назойливость! Где в Вашем примере прогрессбар с именем log?
 
G

Goldz

Member
И еще
Поясните балбесу две строки
JavaScript: 
$(".meter").addClass("done");


 $('.meter').css('width', complete + '%');
 
Ildarmustafin86

Ildarmustafin86

Active member
я тоже с этим мучался. у меня прогресс иногда был нормальным, а иногда сразу становился 100%. В инете наткнулся на это и успокоился. Решил сделать передачу % на вебморду по ws. Вроде все ничего, но ws иногда слетает и происходит переподключение. А иногда и загрузка файла слетает. поэтому решил что индикации на lcd мне достаточно, главное чтобы прошивка встала без косяков.
 
G

Goldz

Member
Так как раздел для начинающих, напишу проверенный пример загрузки файла на сервер. Я как начинающий HTML код писать ручками не умею. Страничку сгенерил WYSIWYG Web Builder 16, а потом начал навешивать на нее все необходимое. Привожу куски рабочего кода с реального проекта. Может кому начинающему и пригодятся
JavaScript: 
<script>
$(document).ready(function()
{
    $("#FiSe :file").on('change', function()
   {
      var input = $(this).parents('.input-group').find(':text');
      input.val($(this).val());
   });
   $("#upload").button();
   $("#proBar").progressbar(
   {
      value: 0,
      change: function()
      {
         $("#proBar-label").text($(this).progressbar('value') + '%');
      }
   });
});
</script>

</head>
<body>
<div id="FiSe" class="input-group" style="position:absolute;left:494px;top:370px;width:305px;height:53px;z-index:14;">
<input class="form-control" type="text" readonly="">
<label class="input-group-btn">
<input type="file" name="FiSe" id="FiSe-file" style="display:none;"><span class="btn">Выбрать файл</span>
</label>
</div>

<button type="submit" id="upload" name="upload" value="Записать" style="position:absolute;left:685px;top:241px;width:99px;height:46px;z-index:28;" title="&#1047;&#1072;&#1087;&#1080;&#1089;&#1072;&#1090;&#1100; &#1085;&#1072; SD">Записать</button>

<div id="proBar"  style="position:absolute;left:498px;top:376px;width:294px;height:39px;z-index:15;">
<div id="proBar-label">14%</div>
</div>
Возможно тут есть лишний код, ведь его создал генератор
FiSe - кнопка выбора файла
upload - кнопка отправки файла на сервер
proBar - progressbar - показывает прогресс процедуры загрузки
JavaScript: 
proBar.hidden=true;
var time = performance.now();
upload.onclick = function(e) {
         let fileLen=document.getElementById("FiSe-file").files.length
         if(fileLen === 0){
            return;
          }
        
         proBar.hidden=false;
         $('#proBar').progressbar('option', 'value', 0);
         var fileUp = document.getElementById("FiSe-file").files[0];
         let formData = new FormData();
         formData.append("photo",fileUp );
         xmlHttp = new XMLHttpRequest();
         xmlHttp.open("POST", "/edit");
//*******************************************************
         xmlHttp.upload.onprogress = function(event){
         let UpV =Math.round((event.loaded *100) /event.total);
         $('#proBar').progressbar('option', 'value', UpV);
         }
         xmlHttp.onload = xmlHttp.onerror = function() {
         time = Math.round(performance.now() - time);
         var d = new Date(time);
         proBar.hidden=true;
        
if (this.status == 200) { alert("Все хорошо!\n"+ "Файл размером "+
         fileUp.size/1000+" Kb\n"+"Записали на SD за "+ d.getUTCMinutes() +
         " минут " + d.getUTCSeconds() + " секунд "); }

         else { alert("Все плохо!"); }
 };
//**************************************
         xmlHttp.send(formData);
}
Вообще в HTTP запросах есть маленький камушек преткновения. Для начинающих сделаю открытие. Как начинающий я всегда помнил что исполнение программы- последовательное выполнение строк. В запросе не так. С начала исполняется последовательно строки до xmlHttp.send(formData);. Потом xmlHttp.send(formData);. И после этого функция - xmlHttp.upload.onprogress = function(event). Вы скажите это очевидно, но когда (два месяца назад) я начал изучать Javascript, этой очевидности я не нашел
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу