<!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="谢勇彬,XYB" />
<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) {
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>

JS任意文件转base64的更多相关文章

  1. js中将文件的base64转换成file并上传到服务器

    ** * @param base64Codes * 图片的base64编码 */ function sumitImageFile(base64Codes){ var form=document.for ...

  2. python 对任意文件(jpg,png,mp3,mp4)base64的编码解码

    程序是事件驱动的,写博客是什么驱动的?事件? 时间?no,我承认我很懒,甚至不愿意记录总结.哪是什么驱动的? 对! 问题驱动的.遇到了问题解决了问题突然想起来搬到blog上,让遇到相同问题的可以参考下 ...

  3. jquery 图片文件转base64 显示

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  4. js将图片转为base64编码,以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  5. 使用JS将图片转为Base64

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 前端使用js读取文件

    最近同时问我js能不能读取本地文件: 想起以前看到js读取本地文件的文章,然后自己写了个demo. ps:这有点想Java的IO流,但是又有差别. 首先我们定义一个input标签type=" ...

  7. 应用服务器Glassfish任意文件读取漏洞

    catalogue . 前言和技术背景 . Glassfish安装配置 . 漏洞利用 . 漏洞缓解(修复) 1. 前言和技术背景 0x1: GlassFish是什么 GlassFish 是用于构建 J ...

  8. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

  9. 代码审计之XiaoCms(后台任意文件上传至getshell,任意目录删除,会话固定漏洞)

    0x00 前言 这段时间就一直在搞代码审计了.针对自己的审计方法做一下总结,记录一下步骤. 审计没他,基础要牢,思路要清晰,姿势要多且正. 下面是自己审计的步骤,正在逐步调整,寻求效率最高. 0x01 ...

随机推荐

  1. 网络工程师HCNA认证学习笔记Day1

    企业网络 企业网络远程互联是广域网WAN互联,而非互联网Internet小型企业网络:一个路由器.交换机.AP大型企业网络:核心层.汇聚层.接入层.考虑可用性.稳定性.扩展性.安全性.可管理,冗余. ...

  2. IT兄弟连 JavaWeb教程 JSP中的三大指令

    指令标识主要用于设定整个JSP页面范围内都有效的相关信息,它是被服务器解释并执行的,不会产生任何内容输出到网页中.也就是说,指令标识对于客户端浏览器是不接见的.JSP页面的指令标识与我们的身份证类似, ...

  3. idea | SpringBoot项目热加载

    第一步: 在pom文件添加依赖: <dependency> <groupId>org.springframework.boot</groupId> <arti ...

  4. Python -3-列表和元组

    1.用list就可以像修改列表那样修改字符串了 >>> list('Hello') ['H', 'e', 'l', 'l', 'o'] 可将任何序列作为list的参数   2.列表的 ...

  5. iOS蓝牙开发总结-4

    蓝牙开发总结 只要熟悉蓝牙的流程,和蓝牙中每一个角色的作用,其实蓝牙通讯并没有想象中的难 1.蓝牙中心CBCentralManager:一般指得是iPhone手机 2.设备(外设)CBPeripher ...

  6. asyncio模块

    asyncio模块   这是官网也非常推荐的一个实现高并发的一个模块,python也是在python 3.4中引入了协程的概念. asyncio 是干什么的? 异步网络操作 并发 协程 python3 ...

  7. scrapy框架中Item Pipeline用法

    scrapy框架中item pipeline用法 当Item 在Spider中被收集之后,就会被传递到Item Pipeline中进行处理 每个item pipeline组件是实现了简单的方法的pyt ...

  8. shell 中的if语句

    if [ t != "." -a t != ".." ] 之前一直不知道 -a 是什么意思,后来才知道     -a = and  ;    -o = or

  9. L. Right Build bfs

    http://codeforces.com/gym/101149/problem/L 给出一个有向图,从0开始,<u, v>表示要学会v,必须掌握u,现在要学会a和b,最小需要经过多少个点 ...

  10. CSS 条纹背景深入

    一.水平渐变 实现水平条纹很简单 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...