上传文件并返回base64 demo

最新推荐文章于 2023-12-01 14:07:35 发布

别亦难�

最新推荐文章于 2023-12-01 14:07:35 发布

阅读量133

点赞数

分类专栏： js基础文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_43806488/article/details/123197784

版权

js基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="在线Base64生成转换小工具，可以实现任意文件转Base64 Data-URI编码，文件往页面中一拖即可。" />
    <meta name="keywords" content="base64, FileReader, readAsDataURL, 文件" />
    <meta name="author" content="LNN" />
    <title>任意文件转base64-直接拖进来</title>
    <style>
        body {
            word-break: break-all;
            margin: 0 1em;
            min-height: 100vh;
            font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
            overflow: hidden;
        }

        .empty::before {
            position: absolute;
            font-size: 50px;
            content: '任意文件\A拖到这里';
            white-space: pre;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: gray;
        }
    </style>
</head>

<body class="empty">
    <script>
        window.addEventListener("dragenter", function (event) { event.preventDefault(); }, false);
        window.addEventListener("dragover", function (event) { event.preventDefault(); }, false);
        window.addEventListener("drop", function (event) {
            var reader = new FileReader();
            reader.onload = function (e) {
                console.log(e.target.result);
                document.body.insertAdjacentHTML("afterBegin", '<p>' + e.target.result + '</p>');
                document.body.classList.remove('empty');
            };
            reader.readAsDataURL(event.dataTransfer.files[0]);
            event.preventDefault();
        }, false);
    </script>

</body>

</html>

别亦难�

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上传文件并返回base64 demo

<!doctype html><html><head> <meta charset="utf-8"> <meta name="description" content="在线Base64生成转换小工具，可以实现任意文件转Base64 Data-URI编码，文件往页面中一拖即可。" /> <meta name="keywords" content="base64, FileReader, readAsDataURL
复制链接

扫一扫