Progressbar

@bb_oo · Регистрация: 22.11.2013

Студворк — интернет-сервис помощи студентам

Подскажите. Как сделать. Имеется например див 400x400. При перетакскивании на него картинки (droggable вроде называется эта фишка) должен появиться progreesbar, в котором будет отображено сколько из скольких загружено МБ\ГБ. + Отображаались проценты всего этого процесса.
И еще интересует. Как можно сделать небольшую диаграммку progressbar`a? Я не прошу Вас писать код, хотябы покажите куда копать?

@bb_oo · 01.05.2014, 13:09 **[ТС]**

вобще ошибку не выводит(

@Lazy_Den · 01.05.2014, 13:27

Сообщение от bb_oo

вобще ошибку не выводит(

Угу... С юбилеем. Уже 40 сообщений в теме, а мы всё, как горох об

Делайте реальный пример, как было в этом сообщении.

@bb_oo · 01.05.2014, 13:43 **[ТС]**

да. Это подойдет. Спасибо) Я правильно перевожу байты в мБ?

JavaScript
1
$('.afd').html('Uploaded   ' + evt.target.files[0].size/1000000 + 'mb');

Я думаю все верно, только вот смущает кол-во знаков после запятой. Скажите. Как сделать только два знака после запятой?
Uploaded 46.738815mb

Добавлено через 3 минуты
и ошибку бьет постоянно.

Uncaught TypeError: Cannot read property '0' of undefined

@Lazy_Den · 01.05.2014, 14:23

Сообщение от bb_oo

Я правильно перевожу байты в мБ?

Сударь, к доске! Сколько килобайт в мегабайте? А сколько байт в одном килобайте? И дневник мне на стол!

Сообщение от bb_oo

Как сделать только два знака после запятой?

JavaScript
1
alert( 46.738815.toFixed(2) ); // 46.74

Сообщение от bb_oo

и ошибку бьет постоянно.

Телепатировать не умею

@bb_oo · 01.05.2014, 14:27 **[ТС]**

Он бьет вот эту ошибку, которая находится на строке, которая содержит следующее:

JavaScript
1
$('.afd').html('Uploaded   ' + evt.target.files[0].size/1000000 + 'mb');

Текст ошибки в консоли:
Uncaught TypeError: Cannot read property '0' of undefined

@Lazy_Den · 01.05.2014, 14:33

Сообщение от bb_oo

Текст ошибки в консоли

Свойство не определено. Это и так должно быть понятно. А писал я. что не умею телепатировать потому, что для выяснения нужно видеть весь реальный код.

@bb_oo · 01.05.2014, 14:35 **[ТС]**

Вот весь скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<script>
  var reader;
  var progress = document.querySelector('.percent');
 
  function abortRead() {
    reader.abort();
  }
 
  function errorHandler(evt) {
    switch(evt.target.error.code) {
      case evt.target.error.NOT_FOUND_ERR:
        alert('File Not Found!');
        break;
      case evt.target.error.NOT_READABLE_ERR:
        alert('File is not readable');
        break;
      case evt.target.error.ABORT_ERR:
        break; // noop
      default:
        alert('An error occurred reading this file.');
    };
  }
 
  function updateProgress(evt) {
    
    if (evt.lengthComputable) {
      var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
      
      // Increase the progress bar length.
      if (percentLoaded < 100) {
         
        progress.style.width = percentLoaded + '%';
        progress.textContent = percentLoaded + '%';
       
      }
    }
  }
 
  function handleFileSelect(evt) {
    $('.drop').hide();
    progress.style.width = '0%';
    progress.textContent = '0%';
 
    reader = new FileReader();
    reader.onerror = errorHandler;
    reader.onprogress = updateProgress;
    reader.onabort = function(e) {
      alert('File read cancelled');
    };
    reader.onloadstart = function(e) {
      document.getElementById('progress_bar').className = 'loading';
    };
    reader.onload = function(e) {
      // Ensure that the progress bar displays 100% at the end.
      progress.style.width = '100%';
      progress.textContent = '100%';   
      $('.afd').html('Uploaded   ' + evt.target.files[0].size/1000000.toFixed(2) + 'mb');
    }
 
    // Read in the image file as a binary string.
    reader.readAsBinaryString(evt.target.files[0]);
  }
 
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

@Lazy_Den · 01.05.2014, 14:54

Сообщение от bb_oo

Вот весь скрипт

Кроме как то, что эту строку:

JavaScript
1
2
3
$('.afd').html('Uploaded   ' + evt.target.files[0].size/1000000.toFixed(2) + 'mb');
// лучше записать так
$('.afd').html('Uploaded   ' + (evt.target.files[0].size / 1000000).toFixed(2) + 'mb');

каких-то грубых ошибок не замечено. Даже тест маленький сделал и никаких ошибок в стиле "Uncaught TypeError: Cannot read property '0' of undefined" - не было. Значит у вас есть еще что-то, что вызывает ошибку.

@bb_oo · 01.05.2014, 15:30 **[ТС]**

Спасибо. Я тут до всего уже сам начал догонять) только вот осталось один нюансик) Как узнать сколько загружено мб. Как вывести итоговый размер фала - я знаю, а вот сколько загружено не знаю. Подскажешь?)

Добавлено через 1 минуту

JavaScript
1
 var loaded = (evt.loaded / evt.total);

???

@Lazy_Den · 01.05.2014, 15:35

bb_oo, я же уже писал... Должно быть в этом роде:
'Загружено ' + event.loaded + ' байт из '+ event.total

@bb_oo · 01.05.2014, 19:43 **[ТС]**

Сообщение от Lazy_Den

event.loaded

В консоли бьет ошибку:

JavaScript
1
Uncaught SyntaxError: Unexpected string

Добавлено через 8 минут
axaxax) идиотина) забыл "+" дописать)

Добавлено через 12 минут
Подскажи последний момент) Как поместить суда эти две переменные?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function updateProgress(evt) {
    $('.drop').hide();
    $('.go').fadeIn();
    
    if (evt.lengthComputable) {
      var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
      var fileSize =  evt.target.files[0].size/1000000;
      
      // Increase the progress bar length.
      if (percentLoaded < 100) {
        loadingWidth.style.width = percentLoaded + '%';
        loadingPer.textContent = percentLoaded +'%';
       
      }
    }
  }

var fileSize = evt.target.files[0].size/1000000;
var loadedFileSize = event.loaded/1000000;
$('#go5').html(loadedFileSize.toFixed(0) + ' из <span>' + fileSize.toFixed(0) + '</span>мб');

Добавлено через 42 секунды
мне нужно вставить их в условие когда (percentLoaded < 100). Пробовал, но у меня бьет ошибку

Uncaught TypeError: Cannot read property '0' of undefined

Добавлено через 2 часа 52 минуты
ну помогите кто-нибудь(((((((

Добавлено через 46 минут
Немного "подумав" решил так:

JavaScript
1
2
var fileSizeLoaded = evt.loaded/1000000;
      var fileSizeTotal = evt.total/1000000;

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762

	Progressbar 28.04.2014, 15:51. Показов 2375. Ответов 50 Метки нет (Все метки) Подскажите. Как сделать. Имеется например див 400x400. При перетакскивании на него картинки (droggable вроде называется эта фишка) должен появиться progreesbar, в котором будет отображено сколько из скольких загружено МБ\ГБ. + Отображаались проценты всего этого процесса. И еще интересует. Как можно сделать небольшую диаграммку progressbar`a? Я не прошу Вас писать код, хотябы покажите куда копать? 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	01.05.2014, 13:09 [ТС]
	вобще ошибку не выводит( 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	01.05.2014, 15:35
	bb_oo, я же уже писал... Должно быть в этом роде: 'Загружено ' + event.loaded + ' байт из '+ event.total 0