const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);

获取图片文件签名

此示例演示了如何使用 bytes() 读取多个图片文件的签名字节，并识别其类型。

HTML

首先，我们定义一个 <select> 元素用于选择文件类型，并附带指示 WikiMedia commons 上特定文件的相应值，以便获取。

html

<label for="file-select">Choose a file:</label>

<select name="Files" id="file-select">
  <option value="">--Select an image type--</option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png">
    PNG
  </option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg">
    JPG
  </option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example.gif">
    GIF89a
  </option>
</select>

<pre id="log"></pre>

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

代码首先检查是否支持 bytes() 方法。如果支持该方法，则为 <select> 元素添加一个 change 事件 的事件处理程序。当值更改时，它会将所选内容的值（图片文件的 URL）传递给下面定义的 checkSignature() 方法。如果不支持该方法，则会记录此信息。

if ("bytes" in Response.prototype) {
  const selectFileElement = document.getElementById("file-select");
  selectFileElement.addEventListener("change", (event) => {
    try {
      checkSignature(event.target.value);
    } catch (e) {
      log(e);
    }
  });
} else {
  log("Response.bytes() not supported");
}

下面定义了 checkSignature() 方法。它会获取给定 url 处的文件的内容，并使用 response.bytes() 将其作为字节数组获取。然后将初始字节与常见文件类型的初始签名字节进行比较。最后记录文件名和文件类型。

async function checkSignature(url) {
  if (url === "") return;
  log(`File: ${url}`);
  const response = await fetch(url);
  const image = await response.bytes();

  // File signatures from: https://en.wikipedia.org/wiki/List_of_file_signatures
  const jpgSignature = [0xff, 0xd8, 0xff, 0xe0];
  const pngSignature = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
  const gif89aSignature = [0x47, 0x49, 0x46, 0x38, 0x39, 0x61];

  if (
    image
      .slice(0, jpgSignature.length)
      .every((byte, index) => byte === jpgSignature[index])
  ) {
    log(`JPG signature: FF D8 FF E0`);
  } else if (
    image
      .slice(0, pngSignature.length)
      .every((byte, index) => byte === pngSignature[index])
  ) {
    log(`PNG signature: 89 50 4E 47 0D 0A 1A 0A`);
  } else if (
    image
      .slice(0, gif89aSignature.length)
      .every((byte, index) => byte === gif89aSignature[index])
  ) {
    log(`GIF (GIF89a) signature: 47 49 46 38 39 61`);
  } else {
    log("Unknown format");
  }
}

结果

使用选择列表选择一个图片类型。日志随后应显示文件名以及根据文件签名确定的文件类型。

规范

规范
Fetch # dom-body-bytes

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025 年 8 月 19 日，由 MDN 贡献者编辑。

在 GitHub 上查看此页面 • 报告此内容的错误