Как считать выбранные файлы

Question

У меня очень простая форма со следующим вводом:

<input id="my_id" multiple="true" type="file" name="image_name[]" />

Теперь у меня два вопроса:

1. как мне подсчитать выбранные файлы с помощью jQuery или чистого JavaScript?
2. как я могу ограничить выбор файла, скажем, 10, потому что теперь он бесконечен?

Answer 1

в случае input type file значение сохраняется в array как files с ключом name.

$('input#my_id').change(function(){
    var files = $(this)[0].files;
    if(files.length > 10){
        alert("you can select max 10 files.");
    }else{
        alert("correct, you have selected less than 10 files");
    }
});

пример скрипки: http://jsfiddle.net/nze2B/3/

Answer 2

чистый JavaScript:

document.getElementById("my_id").addEventListener("change", function() {
    console.log(this.files.length);
});

Answer 3

<input multiple="multiple" id="s" type="file" />

Чтобы получить количество выбранных файлов, используйте element.files.length

let ele =document.getElementById("s");

console.log(ele.files.length); // logs number of files selected

Пользователи

/*
Validates number of files selected
selectedFilesLength - number of files selected - ( ele.files.length )
return true if minimumNumberOfFiles <= selectedFilesLength <= maximumNumberOfFiles
*/
function validate(selectedFilesLength, acceptableLengthRange) {
    return (selectedFilesLength >= acceptableLengthRange[0] && selectedFilesLength <= acceptableLengthRange[1]);
}

// example 1 to 10 files
if(validate(document.getElementById("s").length,[1,10])){
   alert("OK");
}
else{
  alert("Limit exceeded");
}

ИСТОЧНИК: https://www.thewebblinders.in/programming/article/how-to-validate-number-of-files-selected-javascript-6024

Живой пример приведен на вышеуказанном веб-сайте