Base64编码

1、简易小工具（可以得到任意文件的Base64 Data-URI）

<!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：

dragenter：在拖动的元素或选择的文本进入到有效的放置目标时触发。

dragleave：当被鼠标拖动的对象离开其容器范围内时触发此事件。

drop：在一个拖动过程中，释放鼠标键时触发此事件。

new FileReader()：web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。
new FileReader().onload：当读取操作成功完成时调用。
insertAdjacentHTML：可以在指定的地方插入html内容。参数（swhere: 指定插入html标签语句的地方，stext:要插入的内容）。（beforeBegin: 插入到标签开始前，afterBegin:插入到标签开始标记之后，beforeEnd:插入到标签结束标记前，afterEnd:插入到标签结束标记后）。
DataTransfer：对象用来保存，通过拖放动作，拖动到浏览器的数据。