+
95
-

js如何根据文件内容头部标识来获取文件的真正类型?

js如何根据文件内容头部标识来获取文件的真正类型?文件的后缀名可以修改,那么如何通过文件头部的标识来识别文件类型呢?

网友回复

+
15
-

在 JavaScript 中,可以通过读取文件的头部字节(也称为"文件签名"或"魔数")来确定文件的实际类型。这种方法通常用于防止用户上传文件时伪造文件类型。例如,用户可能重命名一个 .exe 文件为 .jpg 以绕过某些限制。但文件头部的字节序列是特定文件类型的特征。

示例实现

以下是一个示例来展示如何在浏览器环境中读取文件头部的标识以确定文件类型。

你可以使用 FileReader API 来读取文件的字节数据,并通过比较文件头部的字节序列来判断文件类型。

1. 定义文件类型的魔数

首先,定义一个文件签名(魔数)到文件类型的映射:

const fileSignatures = {
    '89504E47': 'image/png',
    'FFD8FF': 'image/jpeg',
    '47494638': 'image/gif',
    '504B0304': 'application/zip',
    '25504446': 'application/pdf',
    // 添加其他文件类型签名
};
2. 读取文件头部字节
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Type Detection</title>
</head>
<body>
    <input type="file" id="fileInput">
    <script type="module">
        const fileInput = document.getElementById('fileInput');

        fileInput.addEventListener('change', async (event) => {
            const file = event.target.files[0];
         ...

点击查看剩余70%

我知道答案,我要回答