<!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. IT兄弟连 JavaWeb教程 Servlet会话跟踪 Cookie路径问题

    操作Cookie时,需要注意路径问题: 设置操作:任何路径都可以设置Cookie,但是有时我们也是用设置进行替换Cookie和删除Cookie(maxAge=0)! 替换:只能由完全相同的路径来操作! ...

  2. 新装ubuntu 12.04 ， 使用技巧

    *********************************************** 一.让Ubuntu 12.04开机默认进入命令行模式. 修改 /etc/default/grubGRUB ...

  3. Android的文件读取与存储

    Java新建文件,然后就可以写入数据了,但是Android却不一样,因为Android是 基于Linux的,我们在读写文件的时候,还需加上文件的操作模式 Environment类是一个提供访问环境变量 ...

  4. vmware vSAN 入门

    参考:https://docs.vmware.com/cn/VMware-vSphere/6.5/com.vmware.vsphere.virtualsan.doc/GUID-18F531E9-FF0 ...

  5. PostgreSQL-4-DML数据操纵语言

    1.查询语句 \h SELECT  查看SELECT语句说明 基本语法 SELECT column1, column2, columnN FROM table_name;  查询单列/多列数据 SEL ...

  6. canvas常用画法整理

    代码Canvas.htm <!DOCTYPE html> <html lang="en"> <head> <title>canvas ...

  7. [题解]区间dp_luogu_P3147 262144

    小数据版本P3146,可以区间dp, 性质:对于一个区间如果能合并成一个数,那么这个数是确定的 理解:把每个数看做 2^x 的形式,那么如果合并:2^x + 2^x =2^(x+1) 所以 f [ i ...

  8. Vue初始化

    Vue上面的函数怎么来的 vue的打包路径 在web中使用的vue打包路径: npm run build 打包生成vue.js 下面是依次引入: src/platforms/web/entry-run ...

  9. 持续集成~Jenkins里的NuGet和MSBuild插件

    Jenkins是一个持续集成的环境,它是java开发的,大叔认为它的工作流程是 从源代码拉一个项目下来到它本地(可以配置定时机制) 恢复相关程序包nuget 编译程序 发布程序 现在说一下在配置jen ...

  10. sgu316Kalevich Strikes Back（线段树+扫描线）

    做法:总体想法是求出一个矩形的面积以及它所包含的矩形,然后用自己的面积减掉所包含的.主要问题是怎样求解它所包含的矩形. 因为是没有相交点的,可以利用扫描线的方法去做,类似染色,当前段如果是x色,也就是 ...