Bin文件对话框打开并显示

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.效果

在这里插入图片描述
Bin文件对话框打开并显示

1.代码

2.效果

相关资讯

热文排行

最新新闻

推荐新闻

热搜词
