如何创建显示HTML5 Javascript目录中所有文件的下拉菜单

我想创建一个下拉菜单并显示当前目录中的所有文件，这样当用户单击文件列表中的某个项目时，它会打印该文件的名称

以下是我到目前为止得出的结论：

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>

我想我只是不知道如何使它成为动态的，而不是硬编码列表中的名字。我有点不懂网络编程

编辑：

为了清楚起见，我只想用目录中的文件名填充一个下拉列表。因此，当用户点击该列表中的某个项目时，它将打印或记录（通过

console.log（）

）该文件的内容

您可以使用

元素和

多个
属性集，创建两个数组，其中包含
文件
对象和
文件读取器的
结果
。readAsText（）
和
文件
对象在
更改
事件中迭代
文件列表
对象
元素设置
.name
位于
元素
.textConten
，
.value
到上传的
文件的索引
附加到
元素，将
元素的
值设置为选中的
选项
，该选项对应于
文件的索引
，作为数组中的文本






常量[输入、选择、文本区域、读卡器]=[
document.querySelector（“输入[类型=文件]”）
，document.querySelector（“选择”）
，document.querySelector（“textarea”）
，新文件阅读器
];
让[文件、数据、fn]=[
[],
[]，（文件、读取器）=>新承诺（（解决、拒绝）=>{
reader.onload=（）=>{
reader.onload=reader.onerror=null；
解析（reader.result）；
}
reader.onerror=拒绝；
reader.readAsText（文件）；
})
];
input.onchange=async（）=>{
select.innerHTML=“”；
files.length=data.length=0；
for（输入文件的常量文件）{
常数{
名称
}=文件；
const option=新选项（名称，files.length）；
文件。推送（文件）；
选择.appendChild（选项）；
让结果=等待fn（文件、读取器）；
数据推送（结果）；
}
}
select.onchange=（）=>{
textarea.value=数据[select.value]；
}
请参阅，
文件阅读器
没有
打开方法。您是否尝试过前面评论中链接问题的方法？
FileReader
.readAsText（）
异步返回
load
或
FileReader
事件的
result
FileReaderSync
可从
Worker
线程同步返回结果，不过您需要使用
Worker.postMessage
将结果发送到主线程，并使用
message
事件或使用
MessageChannel
“我只想用目录中的文件名填充一个下拉列表”这不一定是一项需要准确完成的琐碎任务。是否要求也处理所选目录中的子目录？“并且没有子目录，它将是扁平的”，这减少了递归迭代目录和尝试确定文件实际位于哪个目录的元素。链接问题的答案应提供当前查询的解决方案；您在链接问题的答案中尝试过HTML和JavaScript吗？@bartheloafan注意，我们不需要存储
文件
对象，非常感谢您的帮助。我试试这个
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;
}