JavaScript读取本地文本文件随机抽取一行功能故障求助

嘿，我看了你写的随机抽取本地文本行的代码，发现几个可能导致功能失效的问题，咱们一步步来排查和修复：

1. 代码不完整，核心逻辑缺失 #

你贴的代码里rawFile.stat...明显没写完，而且整个readTextFile函数里，完全没有读取成功后分割文本、随机抽取行的逻辑——就算文件读出来了，也没处理内容更新到页面啊！

2. 本地文件读取的跨域限制 #

直接用XMLHttpRequest读取本地文件（比如你直接双击打开html，浏览器用file://协议加载），几乎所有现代浏览器都会因为同源安全策略阻止这个操作，这是浏览器的默认安全限制，不是代码写错了。

3. 同步请求的坑 #

你用了open("GET", file, false)这种同步请求，现在浏览器已经把这种方式标记为不推荐了，不仅会导致页面卡顿，某些场景下甚至会直接被浏览器阻塞。

我给你写了两个可行的方案，你根据自己的使用场景选：

方案一：让用户手动选择本地文件（无跨域问题） #

如果是需要用户自己上传本地文本文件来抽取，用File API最稳妥，完全避开跨域限制：

<html>
<head>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
  <h1 id="gen">Alt Info: </h1>
  <!-- 加一个文件选择框 -->
  <input type="file" id="fileInput" accept=".txt">
  
  <script>
    // 监听文件选择事件
    document.getElementById('fileInput').addEventListener('change', function(e) {
      const selectedFile = e.target.files[0];
      if (!selectedFile) return;
      
      const reader = new FileReader();
      // 文件读取完成后的处理逻辑
      reader.onload = function(event) {
        // 把文本按换行分割，同时过滤空行
        const lines = event.target.result.split(/\r?\n/).filter(line => line.trim() !== '');
        if (lines.length === 0) {
          document.getElementById('gen').textContent = 'Alt Info: 所选文件是空的哦';
          return;
        }
        // 随机抽取一行
        const randomIndex = Math.floor(Math.random() * lines.length);
        const randomLine = lines[randomIndex];
        document.getElementById('gen').textContent = `Alt Info: ${randomLine}`;
      };
      // 开始读取文本文件
      reader.readAsText(selectedFile);
    });
  </script>
</body>
</html>

方案二：服务器环境下读取同目录文件 #

如果你的html和文本文件是放在本地服务器（比如用Python开个简单服务器，或者用XAMPP），可以用异步AJAX请求，同时完善错误处理：

<html>
<head>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
  <h1 id="gen">Alt Info: </h1>
  <!-- 加个触发按钮 -->
  <button onclick="getRandomLine()">抽取随机内容</button>
  
  <script>
    function getRandomLine() {
      // 假设你的文本文件叫data.txt，和html放在同一个目录下
      $.get('data.txt')
        .done(function(fileContent) {
          // 兼容Windows和Linux的换行符
          const lines = fileContent.split(/\r?\n/).filter(line => line.trim() !== '');
          if (lines.length === 0) {
            $('#gen').text('Alt Info: 文件内容为空');
            return;
          }
          // 随机选一行
          const randomLine = lines[Math.floor(Math.random() * lines.length)];
          $('#gen').text(`Alt Info: ${randomLine}`);
        })
        .fail(function() {
          $('#gen').text('Alt Info: 读取文件失败啦，检查下文件路径或者服务器有没有开');
        });
    }
  </script>
</body>
</html>

• 文本文件里如果有很多空行，记得用filter(line => line.trim() !== '')过滤掉，不然可能抽到空内容
• 本地测试千万别直接双击打开html文件！一定要用服务器环境，比如打开命令行，进入文件目录，输入python -m http.server（Python3），然后用http://localhost:8000访问你的html

内容的提问来源于stack exchange，提问作者user9693427