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

Question

У меня есть несколько кнопок просмотра. Я хочу показать кнопку «Применить», когда я загружаю файл с по крайней мере 4 кнопки обзора. Я могу проверить длину файла при загрузке файла с одной кнопки просмотра. Но как я могу проверять длину файла при загрузке файлов из нескольких загрузок.

Вот мой HTML код:

<input type="file" class="files" name="file" /> Read bytes: 
<input type="file" class="files" name="file" /> Read bytes: 
<input type="file" class="files" name="file" /> Read bytes: 
<input type="file" class="files" name="file" /> Read bytes: 
<span class="readBytesButtons"> 
    <button>Apply</button> 
</span> 

Вот мой код JavaScript:

var allFiles = document.getElementsByClassName('files'); 

if (allFiles.length > 4) { 
    alert('Please select a file!'); 
} else { 
    // code to show apply button 
} 

Это не работает хорошо. Как я могу найти длину всего загруженного файла?

Answer 1

Вы можете добавить прослушиватель событий к «изменению «событие входных элементов.

Когда это событие активировано, вы можете зацикливать fileElements и проверить количество файлов, используя files.length. Затем вы можете отслеживать количество элементов, содержащих более 0 файлов.

Если у всех элементов есть загруженный файл, вы можете включить кнопку.

Например:

var fileElements = document.getElementsByClassName('files'); 
 

 
for (var i = 0; i < fileElements.length; i++) { 
 
    fileElements[i].addEventListener("change", countFiles); 
 
} 
 

 
function countFiles() { 
 
    var elementsWithFiles = 0; 
 

 
    for (var j = 0; j < fileElements.length; j++) { 
 
     if (fileElements[j].files.length > 0) { 
 
      elementsWithFiles++; 
 
     } 
 
    } 
 

 
    if (elementsWithFiles > fileElements.length -1) { 
 
     document.getElementById("readBytesButtons").style.display = "block"; 
 
    } 
 
}

.readBytesButtons { 
 
    display: none; 
 
}

<form id="" name=""> 
 
    <input type="file" class="files" name="file"/> Read bytes: 
 
    <input type="file" class="files" name="file"/> Read bytes: 
 
    <input type="file" class="files" name="file"/> Read bytes: 
 
    <input type="file" class="files" name="file"/> Read bytes: 
 
    <span class="readBytesButtons" id="readBytesButtons"> 
 
     <button>Apply</button> 
 
    </span> 
 
</form>

Answer 2

Если вы хотите проверить количество вставленных файлов, вам, скорее всего, потребуется добавить прослушиватель событий к каждому входному файлу. Затем увеличивается, когда файл будет вставлен, а затем проверить, если требуемая amound добавляется вы, вероятно, в конечном итоге с чем-то вроде этого:

var insertedFiles = 0; 

var allFileElements = document.getElementsByClassName('files'); 

for (var i = allFileElements.length - 1; i >= 0; i--) { 
    allFileElements[i].addEventListener("change",check); 
}; 

function update(){ 
    if(this.value == "") { 
     insertedFiles--; 
    } else { 
     insertedFiles++; 
    } 
    check(); 
} 
function check(){ 
    if(insertedFiles > 4){ 
     alert("Show button."); 
    } else { 
     alert("You need to add more files."); 
    } 
} 

скрипку: https://jsfiddle.net/aL0qhoe0/2/