Bin文件对话框打开并显示

发布于：2025-02-10 ⋅ 阅读:(25) ⋅ 点赞:(0)

1.代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bin文件查看器</title> <!-- 修改标题 -->
    <style>
        /* 文件输入框样式 */
        #fileInput {
            display: none; /* 隐藏原生文件输入框 */
        }

        .fileInputLabel {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }

        .fileInputLabel:hover {
            background-color: #0056b3;
        }

        /* 文件名显示文本框样式 */
        #fileNameDisplay {
            margin-top: 10px;
            padding: 8px;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
            font-family: monospace;
        }

        /* HEX输出样式 */
        #hexOutput {
            margin-top: 10px;
            padding: 8px;
            width: 100%;
            height: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: monospace;
            white-space: pre-wrap;
            overflow-y: auto;
            background-color: #f9f9f9;
            position: relative;
        }

        .hex-line {
            display: flex;
        }

        .hex-offset {
            width: 80px; /* 偏移地址宽度 */
            color: #666;
            margin-right: 10px;
        }

        .hex-values {
            flex: 1;
            display: flex;
            gap: 4px; /* 列之间的间距 */
        }

        .hex-column {
            width: 20px; /* 每列的宽度 */
            text-align: center;
        }

        .hex-header {
            display: flex;
            margin-left: 90px; /* 与偏移地址对齐 */
            gap: 4px; /* 列之间的间距 */
            position: sticky;
            top: 0; /* 固定在顶部 */
            background-color: #f9f9f9; /* 背景色与容器一致 */
            z-index: 1; /* 确保列号在最上层 */
            padding-bottom: 8px; /* 增加底部间距 */
            border-bottom: 1px solid #ccc; /* 底部边框 */
        }

        .hex-header .hex-column {
            color: #007bff; /* 列号颜色 */
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1>bin文件查看器</h1> <!-- 修改标题 -->

        <!-- 文件选择按钮 -->
        <label for="fileInput" class="fileInputLabel">选择文件</label>
        <input type="file" id="fileInput">

        <!-- 显示文件名的文本框 -->
        <input type="text" id="fileNameDisplay" placeholder="文件名将显示在这里" readonly>

        <!-- 显示HEX格式文件内容的文本框 -->
        <div id="hexOutput" placeholder="文件内容将以HEX格式显示在这里">
            <!-- 列号标题 -->
            <div class="hex-header">
                <div class="hex-column">0</div>
                <div class="hex-column">1</div>
                <div class="hex-column">2</div>
                <div class="hex-column">3</div>
                <div class="hex-column">4</div>
                <div class="hex-column">5</div>
                <div class="hex-column">6</div>
                <div class="hex-column">7</div>
                <div class="hex-column">8</div>
                <div class="hex-column">9</div>
                <div class="hex-column">A</div>
                <div class="hex-column">B</div>
                <div class="hex-column">C</div>
                <div class="hex-column">D</div>
                <div class="hex-column">E</div>
                <div class="hex-column">F</div>
            </div>
        </div>
    </div>

    <script>
        // 获取文件输入框、文件名显示和HEX输出元素
        const fileInput = document.getElementById('fileInput');
        const fileNameDisplay = document.getElementById('fileNameDisplay');
        const hexOutput = document.getElementById('hexOutput');

        // 监听文件选择事件
        fileInput.addEventListener('change', function (event) {
            const file = event.target.files[0]; // 获取用户选择的文件
            if (file) {
                // 显示文件名
                fileNameDisplay.value = file.name;

                // 使用FileReader读取文件内容
                const reader = new FileReader();
                reader.onload = function (e) {
                    const arrayBuffer = e.target.result;
                    const uint8Array = new Uint8Array(arrayBuffer);
                    let hexContent = '';

                    // 每16个字节为一行
                    for (let i = 0; i < uint8Array.length; i += 16) {
                        const chunk = uint8Array.slice(i, i + 16);
                        const offset = i.toString(16).padStart(8, '0'); // 偏移地址
                        const hexValues = Array.from(chunk)
                            .map(byte => byte.toString(16).padStart(2, '0'));

                        // 构建一行内容
                        hexContent += `<div class="hex-line">
                            <div class="hex-offset">0x${offset}</div>
                            <div class="hex-values">
                                ${hexValues.map(value => `<div class="hex-column">${value}</div>`).join('')}
                            </div>
                        </div>`;
                    }

                    // 将HEX内容插入到列号标题下方
                    hexOutput.innerHTML = `<div class="hex-header">
                        <div class="hex-column">0</div>
                        <div class="hex-column">1</div>
                        <div class="hex-column">2</div>
                        <div class="hex-column">3</div>
                        <div class="hex-column">4</div>
                        <div class="hex-column">5</div>
                        <div class="hex-column">6</div>
                        <div class="hex-column">7</div>
                        <div class="hex-column">8</div>
                        <div class="hex-column">9</div>
                        <div class="hex-column">A</div>
                        <div class="hex-column">B</div>
                        <div class="hex-column">C</div>
                        <div class="hex-column">D</div>
                        <div class="hex-column">E</div>
                        <div class="hex-column">F</div>
                    </div>${hexContent}`;
                };
                reader.readAsArrayBuffer(file);
            } else {
                fileNameDisplay.value = ''; // 如果没有选择文件，清空文件名显示
                hexOutput.innerHTML = `<div class="hex-header">
                    <div class="hex-column">0</div>
                    <div class="hex-column">1</div>
                    <div class="hex-column">2</div>
                    <div class="hex-column">3</div>
                    <div class="hex-column">4</div>
                    <div class="hex-column">5</div>
                    <div class="hex-column">6</div>
                    <div class="hex-column">7</div>
                    <div class="hex-column">8</div>
                    <div class="hex-column">9</div>
                    <div class="hex-column">A</div>
                    <div class="hex-column">B</div>
                    <div class="hex-column">C</div>
                    <div class="hex-column">D</div>
                    <div class="hex-column">E</div>
                    <div class="hex-column">F</div>
                </div>`;
            }
        });
    </script>
</body>
</html>

2.效果

在这里插入图片描述

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布