How to create dropdown menu which displays all files in a directory HTML5 Javascript

Question

I'd like to create a dropdown menu and display all the files currently in a directory so when the user clicks on an item in that list of files, it prints to console the name of that file.

Here is what I've come up with so far:

HTML

<form method="post">
        <select name="DropdownList">
                <option value="file1">fileArray[0]</option>
                <option value="file2">fileArray[1]</option>
                <option value="file3">fileArray[2]</option>
                <option value="file4">fileArray[3]</option>
        </select>
</form>

The problem with doing this hardcoded is what if there are 10 files instead of 4? Trying to figure a more dynamic approach.

Javascript

document.getElementByName('DropdownList').addEventListener('click', function() {
    window.update.forEach(function(d, 'data/baselinedata') {
        var f = readStringFromFileAtPath(d);
        console.log(f)
    });
});

function readStringFromFileAtPath (pathOfFileToReadFrom) {
        var request = new XMLHttpRequest();
        request.open("GET", pathOfFileToReadFrom, false);
        request.send(null);
        var returnValue = request.responseText;
        return returnValue;
}

I guess I just don't know how to make this to dynamic instead of hardcoding the names in the list. I'm kind of a noob to web programming

Edit:

Just for clarity, all I want to do is populate a dropdown list with the names of files in a directory. So when a user goes to click an item in that list, it will print or log (via console.log()) the contents of that file.

Answer 1

您可以使用<input type="file">具有属性集的元素multiple，创建两个包含File对象和对象result的数组，对象在元素事件中迭代对象以设置元素，上传附加到 元素的索引，选择的元素集对应于数组中文本的索引FileReader.readAsText()FileFileListchangeinput type="file".name<option>.textConten.valueFile<select>.value<textarea>optionFile

<input type="file" multiple><br>
<select></select><br>
<textarea></textarea>
<script>
  const [input, select, textarea, reader] = [
    document.querySelector("input[type=file]")
    , document.querySelector("select")
    , document.querySelector("textarea")
    , new FileReader
  ];
  let [files, data, fn] = [
    [],
    [], (file, reader) => new Promise((resolve, reject) => {
      reader.onload = () => {
        reader.onload = reader.onerror = null;
        resolve(reader.result);
      }
      reader.onerror = reject;
      reader.readAsText(file);
    })
  ];
  input.onchange = async() => {
    select.innerHTML = "";
    files.length = data.length = 0;
    for (const file of input.files) {
      const {
        name
      } = file;
      const option = new Option(name, files.length);
      files.push(file);
      select.appendChild(option);
      let result = await fn(file, reader);
      data.push(result);
    }
  }

  select.onchange = () => {
    textarea.value = data[select.value];
  }
</script>