前端例程20210808：文件转十六进制数组工具

Naisu Xu

已于 2022-07-28 14:36:44 修改

阅读量1.2k

点赞数 3

分类专栏： Web与JS相关文章标签：十六进制字节数组嵌入式 web js

于 2021-08-08 16:51:30 首次发布

本文链接：https://blog.csdn.net/naisu_kun/article/details/119429484

版权

Web与JS相关专栏收录该内容

58 篇文章 21 订阅

订阅专栏

文章目录

目的
功能演示
代码实现
总结

目的

我在做偏底层的嵌入式开发的时候如果用到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>