Base64編碼

時間 2019-12-01

原文原文鏈接

一、簡易小工具（能夠獲得任意文件的Base64 Data-URI）html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base64</title>
    <style>
        body { min-height:100vh; word-break:break-all; }
        .empty:before { content:'任意文件\A拖到這裏'; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:#999; font-size:50px; white-space:pre; }
    </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) {
            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>

View Code

addEventListener：web

dragenter：在拖動的元素或選擇的文本進入到有效的放置目標時觸發。瀏覽器

dragleave：當被鼠標拖動的對象離開其容器範圍內時觸發此事件。異步

drop：在一個拖動過程當中，釋放鼠標鍵時觸發此事件。ide

new FileReader()：web應用程序能夠異步的讀取存儲在用戶計算機上的文件(或者原始數據緩衝)內容，可使用File對象或者Blob對象來指定所要處理的文件或數據。
new FileReader().onload：當讀取操做成功完成時調用。
insertAdjacentHTML：能夠在指定的地方插入html內容。參數（swhere: 指定插入html標籤語句的地方，stext:要插入的內容）。（beforeBegin: 插入到標籤開始前，afterBegin:插入到標籤開始標記以後，beforeEnd:插入到標籤結束標記前，afterEnd:插入到標籤結束標記後）。
DataTransfer：對象用來保存，經過拖放動做，拖動到瀏覽器的數據。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。