Question

我有点陷入问题，我正在尝试将本地计算机中的文本文件导入JavaScript并根据文本文件填充HTML下拉列表。我花了很多时间查看有关堆栈溢出的类似问题，但我还没有找到问题的解决方案。以下是文本文件的示例：

 Dogs - 
 Blue Dog
 Black Doggo
 Random Doggo

 Cats -
 Neon cat
 Grumpy cat
 Potato cat

以下是我的JS的样子：

    function LoadTxtFile(p) {
        var AllTxtdata = '';

        var FileRead = new FileReader();
        FileRead.onload = function (e) {
            if (FileRead.readyState === 2) {

                AllTxtdata = FileRead;
                var lines = FileRead.result.split('\n').map(function (line) {
                    return line.trim();
                });

                var select = $("select[name=MySelect]");
                var optionCounter = 0;
                var currentGroup = "";
                lines.forEach(function (line) {

                    if (line.endsWith(" -")) {
                        currentGroup = line.substring(0, line.length - 2);
                        optionCounter = 0;
                        select.append("<optgroup id'" + currentGroup + "' label='" + currentGroup + "'>");
                    } else if (line === "") {
                        select.append("</optgroup>");
                    } else {
                        select.append("<option type='checkbox' id='" + (currentGroup + optionCounter) + "' name'"
                            + (currentGroup + optionCounter) + "' value='"
                            + line + "'>" + line + "</option>");
                    }

                });
            };
        }


    }

HTML

    <div class="Bark">

    <input type="file" id="file" />
     </div>

我正在尝试使用选项组和选项填充HTML下拉列表选择“MySelect”。

Answer 1

您在代码中遗漏了几件事。

将事件附加到文件控件。
从函数中读取实际文件。

在这里，我使用您自己的代码创建了Fiddle。下面，我只是突出显示了我在那里添加的代码行。其余的代码是一样的。

首先在LoadTxtFile（）中获取目标文件。

var targetFile = p.target.files[0];

一旦确定有文件，就开始在最后一行读取文件。

FileRead.readAsText(targetFile);

最后，在方法声明之外，将事件附加到文件控件。

document.getElementById('myFile').addEventListener('change', LoadTxtFile, false);

如何导入本地文本文件以使用FileReader（）填充下拉列表

1 个答案: