前端例程：文件转十六进制数组工具
Posted Naisu Xu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端例程：文件转十六进制数组工具相关的知识，希望对你有一定的参考价值。
目的
我在做偏底层的嵌入式开发的时候如果用到WebServer，那么经常还有可能需要在C/C++代码中嵌入网页文件。常见的作法是将网页文件压缩成gz格式压缩包后再转换成十六进制数组嵌入到C/C++代码中。这个过程中就需要用到文件转十六进制数组工具了，这里就贴上一个简单的工具。
功能演示
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件转字节数组工具</title>
<script>
var hexstr = "";
function read(file) {
var reader = new FileReader();
reader.onload = function () {
let filearr = new Uint8Array(this.result); // 将文件数据存储成字节数组
document.getElementById("showsize").innerHTML = filearr.length;
hexstr = "";
for (let i = 0; i < filearr.length; i++) {
hexstr = hexstr + "0x" + (Array(2).join(0) + filearr[i].toString(16).toUpperCase()).slice(-2) + ", "; // 将字节数据转换成0xXX, 方式字符串
}
hexstr = hexstr.substring(0, hexstr.lastIndexOf(", ")); // 去掉最后的,
document.getElementById("showarr").value = hexstr;
}
reader.readAsArrayBuffer(file); // 以数组方式读取
}
function copy() {
navigator.clipboard.writeText(hexstr).then(function () {
alert("复制成功！");
}, function () {
alert("复制失败！");
});
}
</script>
</head>
<body>
<input type="file" onchange="read(this.files[0])" />
<p>文件长度是：<span id="showsize"></span> （字节）</p>
<textarea id="showarr" style="overflow-y: scroll; width: 30rem; height: 15rem;"></textarea>
<br><button onclick="copy()">复制到剪贴板</button>
</body>
</html>
总结
工具比较简单，就是获取下文件并将其数据一个字节一个字节转换成十六进制显示。
以上是关于前端例程：文件转十六进制数组工具的主要内容，如果未能解决你的问题，请参考以下文章