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:对象用来保存,通过拖放动作,拖动到浏览器的数据。

 

 

posted @ 2018-08-13 16:23  web前端kelly  阅读(330)  评论(0编辑  收藏  举报