Вес загружаемых файлов

Подскажите, как правильно собрать общий вес загружаемых фалов в нескольких мультизагрузочных input-ах?

Моя попытка

 var totalInput = $('.selector> input:not(:last)');
 var totalSize = [];

for (var i = 0; i <= totalInput.length; i++) {
    var input = totalInput[i].files; // "Uncaught TypeError: Cannot read property 'files' of undefined at allSizes" почему ругается?    
    for (var key in input) {
        
        if (typeof(input[key].size) === 'number') {
        totalSize.push(input[key].size);
    
        }
    }
}

https://jsfiddle.net/y0zwk9cL/4/, листинг кода - ниже

document.querySelector('button').onclick = function (event) {
	event.preventDefault()
	var fileInputs = document.querySelectorAll('input')
	var totalSize = 0
	for (var i = 0;i < fileInputs.length; i += 1) {
		var files = fileInputs[i].files
		for (var j = 0; j < files.length; j += 1) {
			totalSize += files[i].size
			console.log(files[i].size)
		}
	}
	alert('Total bytes:' + totalSize)
}

Вот этот код излишне мудренный.

for (var key in input) {
        
        if (typeof(input[key].size) === 'number') {
        totalSize.push(input[key].size);
    
        }
    }

Ибо есть более простой способ доступиться к списку файлов, ассоциированных с инпутом. totalInput[i].files - эта строка вычисляется в массив объектов, проитерируй по ним обычным массивным циклом, а не объектным.

1 лайк

Не могу понять, почему если добавляешь только 1 файл в мультизагрузочный input, он не суммируется ?

В коде была ужасная ошибка. Обрати внимание что во вложенном цикле я использовал i для доступа к элементам массива, на нужно было j. Исправленный вариант
https://jsfiddle.net/y0zwk9cL/21/

document.querySelector('button').onclick = function (event) {
  event.preventDefault()
	var fileInputs = document.querySelectorAll('input')
	var totalSize = 0
	for (var i = 0;i < fileInputs.length; i += 1) {
		var files = fileInputs[i].files
		for (var j = 0; j < files.length; j += 1) {
			totalSize += files[j].size
			console.log(files[j].size)
		}
	}
	alert('Total bytes:' + totalSize)
}
1 лайк

Так как длинна length первого Input была всего 1, каким образом все нормально суммировалось при добавлении нескольких файлов в мультизагрузочный Input.

P.S. Извини за назойливость, хочу понять “механику” ошибки.

Код не работал верно для нескольких файлов. Числа менялись, но не были верными.

for (var i = 0;i < fileInputs.length; i += 1) {
	var files = fileInputs[i].files
	for (var j = 0; j < files.length; j += 1) {
		totalSize += files[i].size
		console.log(files[i].size)
	}
}

Внутренний цикл повторялся столько раз сколько добавлено файлов (files.length раз), но в сумму добавлял размер одного из этих файлов. (того, который files[i].size).

1 лайк