HTML: выберите несколько файлов, но имена файлов не показаны?

Question

Я использую тег «multiple», чтобы пользователь мог выбрать несколько файлов для загрузки.

<input type="file" name="files[]" multiple /> 

Но это только показывает, например, «3 файла выбраны». Было бы лучше также показать имена файлов.

Это выполнимо? Благодарю.

BTW, в этом случае, как отменить выбор файлов (например, очистить список)?

Answer 1

Вы можете сделать это с помощью .files собственности на входном элементе:

document.getElementById('files').addEventListener('change', function(e) { 
 
    var list = document.getElementById('filelist'); 
 
    list.innerHTML = ''; 
 
    for (var i = 0; i < this.files.length; i++) { 
 
    list.innerHTML += (i + 1) + '. ' + this.files[i].name + '\n'; 
 
    } 
 
    if (list.innerHTML == '') list.style.display = 'none'; 
 
    else list.style.display = 'block'; 
 
});

<input type="file" id="files" multiple /> 
 
<pre id="filelist" style="display:none;"></pre>

Это первый опустошает список в случае, если есть еще что-то от предыдущего выбора, а затем проходит через каждый элемент в списке файлов, а затем добавляет его к элементу <pre> под вводом. <pre> будет скрыт, если в списке нет выбранных элементов.

PS: вы можете удалить список, просто щелкнув по нему, а затем либо нажав esc, либо нажав «отменить» в окне выбора файла.