I am using "multiple" tag to let user choose multiple files for uploading.
<input type="file" name="files[]" multiple />
But it only shows e.g., "3 files selected". It would be better to also show file names.
Is it doable? Thanks.
BTW, in this case how to deselect files (e.g., clear the list)?
Tip: For <input type="file"> : To select multiple files, hold down the CTRL or SHIFT key while selecting.
Select multiple files or folders that are not grouped together. Click the first file or folder, and then press and hold the Ctrl key. While holding Ctrl , click each of the other files or folders you want to select.
Complete HTML/CSS Course 2022 To allow multiple file uploads in HTML forms, use the multiple attributes. The multiple attributes work with email and file input types. For limiting maximum items on multiple inputs, use JavaScript. Through this, limit the number of files to be uploaded.
You can do this with the .files
property on the input element:
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>
This first empties the list in case there's still something from the previous selection, and then it goes through each item in the file list, and then adds that to the <pre>
element underneath the input. The <pre>
will be hidden if there are no selected items in the list.
PS: you can clear the list by just clicking the input, and then either pressing esc or clicking "cancel" on the file-selection window.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With