Javascript получает количество файлов и их имена из элемента ввода файла с несколькими атрибутами?

У меня есть входной файл с атрибутом multiple="multiple", позволяющий пользователям одновременно выбирать несколько файлов. Я хотел бы отобразить выбранные имена файлов и их счет до загрузки, но я не уверен, как получить эту информацию из элемента ввода файла с помощью javascript?

<input type="file" id="fileElementId" name="files[]" size="20" multiple="multiple" />

Я пробовал это:

document.getElementById('fileElementId').value

Но это только возвращает одно имя файла при выборе нескольких файлов. Использование JavaScript - как получить количество выбранных файлов и их имен из элемента ввода файла с атрибутом multiple?

Ответ 1

В новых браузерах, поддерживающих файл HTML5, ваш элемент <input> будет иметь свойство "files". Это даст вам ссылку "FileList", которая имеет свойство ".length". Также существует метод доступа, называемый ".item()" в экземпляре "FileList", и он принимает целочисленный аргумент для доступа к отдельным элементам "Файл". У них есть свойство ".name".

Итак:

var inp = document.getElementById('fileElementId');
for (var i = 0; i < inp.files.length; ++i) {
  var name = inp.files.item(i).name;
  alert("here is a file name: " + name);
}

Это, конечно же, не будет работать в старых версиях IE, и я даже не знаю, насколько тщательны поддержка Safari и Chrome; однако, если вы пишете страницы с "несколькими", установленными на входе в файл, вы уже танцуете на краю: -)

Ответ 2

Это не проверено, но вы можете попробовать:

    $('#fileElementId').get(0).files;

или

    document.getElementById('fileElementId').files;

Ответ 3

Второй ответ был неправильным.

Ответ должен быть document.getElementById('fileElementId').files.length; вместо document.getElementById('fileElementId').files;.