Question

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

     Dogs - 
     Blue Dog
     Black Doggo
     Random Doggo

     Cats -
     Neon cat
     Grumpy cat
     Potato cat

这是我的js的样子：

     <html>
   <body>
<select name="myselect">
 </select>
  </body>
   <script>
  Function GetTxt() {
  var AllData = '';
  var StuffFile = new XMLHttpRequest();

  StuffFile.open("GET", "C:Users/Documents/Desktop/WeirdDoggos.txt",true)
   StuffFile.onreadystatechange = function(){
   if(StuffFile.readyStatus === 4) {
   if (StuffFile.status === 200 || StuffFile.status === 0) {
      AllData = StuffFile.responseText;
      var lines = StuffFile.responseText.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>");
           }
       });
     }
    }
   }
   }
   </script>
   </html>

所以我试图在HTML中填充Select name =“MySelect”，但我认为它不会导入文本文件，任何提示？

Answer 1

您无法像这样读取用户磁盘上的文件。正如@Puddingfox所说，这将是一个巨大的安全漏洞。但你可以做的是在页面上有一个文件输入，用户可以在他们的计算机上选择一个文本文件，然后读取该文件的内容。

这两者之间的区别在于，使用文件上传按钮，网站需要用户明确的操作来读取磁盘上的文件，而不是只是在他们不知道的情况下阅读某些人的文件或许可。

Brian Campbell has a really good explanation如何在用户使用File API选择文件后阅读该文件，我建议您阅读他要说的内容以了解更多信息。

以下是代码示例。

<html>

<body>
  <input type="file" id="file" />
  <script type="text/javascript">
    document.getElementById('file').onchange = () => {
      const file = document.getElementById('file').files[0];
      if (file) {
        const reader = new FileReader();
        reader.readAsText(file, 'UTF-8');
        reader.onload = (evt) => {
          console.log(evt.target.result);
          // Do stuff with the text data here...
        };
        reader.onerror = (evt) => {
          console.error('Failed to read this file');
        };
      }
    };
  </script>
</body>

</html>

希望这至少可以指明你正确的方向。

Answer 2

添加此

StuffFile.open("GET", file:///User/**YOURUSERNAME**/Documents/Desktop/WeirdDoggos.txt ,true);

如何将文本文件导入javascript？

2 个答案: