上传文件 并返回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, 文件" />
    <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", '

' + e.target.result + '

'
); document.body.classList.remove('empty'); }; reader.readAsDataURL(event.dataTransfer.files[0]); event.preventDefault(); }, false); </script> </body> </html>

你可能感兴趣的:(js基础,前端,javascript,css)