0

I want to display a list of file names that I will upload in the list_file div before uploading, is there a reference to that?

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="name_file">
    <div id="list_file"></div>
</form>
Yohanes Adi P
  • 13
  • 5

1 Answers1

2

Input should be assigned multiple attribute to allow choose more than one file.

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" multiple id="files" name="name_file">
    <div id="list_file"></div>
 </form>

Later on, JavaScript code is:

var fileInput = document.getElementById('files');
var listFile = document.getElementById('list_file');

fileInput.onchange = function () {
  var files = Array.from(this.files);
  files = files.map(file => file.name);
  listFile.innerHTML = files.join('<br/>');
}
Damian Czapiewski
  • 843
  • 7
  • 23