前端例程20210808：文件转 DataURI Base64 数据工具

Naisu Xu

已于 2022-07-28 14:40:15 修改

阅读量463

点赞数

分类专栏： Web与JS相关文章标签： javascript js 前端 html5 base64

于 2021-08-08 22:29:35 首次发布

本文链接：https://blog.csdn.net/Naisu_kun/article/details/119429859

版权

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

58 篇文章 21 订阅

订阅专栏

本文介绍了一个简单的HTML和JavaScript应用，该应用允许用户选择本地文件并将其转换为DataURIBase64格式，以便在网页中内联使用，以减少HTTP请求。用户可以选择文件，数据会显示在文本区域，并能一键复制到剪贴板。

摘要由CSDN通过智能技术生成

目的

在做网页开发的时候经常会把一些较小的图片、图标等直接以文本数据的方式直接嵌入在代码中，以减少同一个页面上内容的请求次数。通常的做法时将这些文件转换成 DataURI Base64 格式数据嵌入到代码中。

功能演示

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>文件转 DataURI Base64 数据工具</title>
    <script>
        var data = "";

        function read(file) {
            var reader = new FileReader();
            reader.onload = function () {
                data = this.result; // 获取数据
                document.getElementById("show").value = data;
            };
            reader.readAsDataURL(file); // 以DataURI Base64方式读取
        }

        function copy() {
            navigator.clipboard.writeText(data).then(function () {
                alert("复制成功！");
            }, function () {
                alert("复制失败！");
            });
        }
    </script>
</head>

<body>
    <input type="file" onchange="read(this.files[0])" /><br>
    <textarea id="show" style="overflow-y: scroll; width: 30rem; height: 15rem;"></textarea><br>
    <button onclick="copy()">复制到剪贴板</button>
</body>

</html>

总结

工具比较简单，就只是在读取文件时以DataURL形式读取而已。

Naisu Xu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端例程20210808：文件转 DataURI Base64 数据工具

在做网页开发的时候经常会把一些较小的图片、图标等直接以文本数据的方式直接嵌入在代码中，以减少同一个页面上内容的请求次数。通常的做法时将这些文件转换成 DataURI Base64 格式数据嵌入到代码中。...
复制链接

扫一扫