如何在JavaScript中读取文件名包含#号的文本文件？

安全阿岳

2026-5-22

解决带#号文件名的文本读取问题

嘿，这个坑我踩过！问题根源在于#在URL里是特殊保留字符——它代表锚点（fragment identifier），浏览器会自动把#及后面的内容从请求URL里截掉，根本不会发给服务器，所以你的请求其实没指向正确的#name.log文件。

给你两个可行的解决方案：

方案1：编码特殊字符（适配你的XMLHttpRequest代码）

用encodeURIComponent()把整个文件名编码，它会把#转换成URL安全的%23，这样服务器就能正确识别文件名了。修改后的代码如下：

function readTextFile(file) {
  // 对文件名进行URL编码
  const encodedFile = encodeURIComponent(file);
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", encodedFile, false);
  rawFile.onreadystatechange = function () {
      if(rawFile.readyState === 4) {
          if(rawFile.status === 200 || rawFile.status == 0)
              alert(rawFile.responseText);
      }
  }
  rawFile.send(null);
}
var file = "#name.log";
readTextFile(file);

方案2：用更现代的Fetch API（推荐）

XMLHttpRequest已经是比较旧的API了，现在更推荐用Fetch，代码更简洁易读，同样需要编码文件名：

async function readTextFile(file) {
  const encodedFile = encodeURIComponent(file);
  try {
    const response = await fetch(encodedFile);
    if (!response.ok) {
      throw new Error(`请求失败：状态码 ${response.status}`);
    }
    const textContent = await response.text();
    alert(textContent);
  } catch (err) {
    console.error('读取文件出错：', err);
  }
}

var file = "#name.log";
readTextFile(file);