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>
addEventListener：
dragenter：在拖动的元素或选择的文本进入到有效的放置目标时触发。
dragleave：当被鼠标拖动的对象离开其容器范围内时触发此事件。
drop：在一个拖动过程中，释放鼠标键时触发此事件。
new FileReader()：web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。
new FileReader().onload：当读取操作成功完成时调用。
insertAdjacentHTML：可以在指定的地方插入html内容。参数（swhere: 指定插入html标签语句的地方，stext:要插入的内容）。（beforeBegin: 插入到标签开始前，afterBegin:插入到标签开始标记之后，beforeEnd:插入到标签结束标记前，afterEnd:插入到标签结束标记后）。DataTransfer：对象用来保存，通过拖放动作，拖动到浏览器的数据。