<!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. unicode官网 unicode码表和标准下载

  2. PostgreSQL - 用psql 运行SQL文件

    对于预先写好的SQL文件,比如/home/user1/updateMyData.sql, 可以有两种方式来运行这个SQL文件. 方式一:连接db后执行SQL文件 首先通过psql连接到对应的db: p ...

  3. ScrollTo：实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...

  4. js动态实现文本框不可编辑状态

    两种方法: $("#id").attr("readOnly",false); 不可编辑,可以传值 $("#id").attr("d ...

  5. socket连接 代码

    dispatch_sync(dispatch_get_global_queue(, ), ^{ // 处理耗时操作的代码块... // 创建socket /* 1.AF_INET: ipv4 执行ip ...

  6. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  7. B.小A与任务

    链接:https://ac.nowcoder.com/acm/contest/369/B 题意: 小A手头有 n 份任务,他可以以任意顺序完成这些任务,只有完成当前的任务后,他才能做下一个任务 第 i ...

  8. python对文件的压缩解压

    python自带的zipfile的模块支持对文件的压缩和解压操作 zipfilp.ZipFile 表示创建一个zip对象 zipfile.ZipFile(file[, mode[, compressi ...

  9. csu 1551: Longest Increasing Subsequence Again BIT + 思维

    预处理last[i]表示以第i个开始,的合法后缀. pre[i]表示以第i个结尾,的合法前缀. 那么每一个数a[i],肯定是一个合法后缀last[i] + 一个合法前缀,那么合法前缀的数字要小于a[i ...

  10. CF1081C Colorful Bricks

    思路: dp[i][j]表示到第i个砖块为止共计有j个砖块和它左边的砖块颜色不同. 实现: #include <bits/stdc++.h> using namespace std; ty ...