<!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. CentOS 利用 yum 安装卸载软件常用命令

    一.yum安装和卸载软件 有个前提是yum安装的软件包都是rpm格式的. 安装的命令是,yum install ~,yum会查询数据库,有无这一软件包,如果有,则检查其依赖冲突关系,如果没有依赖冲突, ...

  2. C#连接Sqlite实现单表操作

    今天我们来了解下VS使用的众多数据库中比较轻量的数据库SQLITE,好处当然就在于“轻~”!!!.自己理解

  3. bzoj3427:[POI2013]BAJ-Bytecomputer

    传送门 很显然有一个结论:最大不过1,最小不过-1 然后dp,设\(f[i][j]\)为满足前\(i\)个不下降,当前放的是\(j-2\),转移就比较好想了 具体方程看代码吧,终于有一个自己会写的题了 ...

  4. JSP && Servlet | 上传文件

    在WebContent下新建index.jsp 要点: 1.  表单 method 属性应该设置为 POST 方法,不能使用 GET 方法. 2.  表单 enctype 属性应该设置为 multip ...

  5. [题解]luogu_P2613有理数取余

    #include<bits/stdc++.h> #define ll long long using namespace std; ; inline int read(){ ,fix=;c ...

  6. laravel配合swoole使用总结

    最近对接硬件做了两个项目,用到了swoole 第一个是门禁系统,需要远程开门.离线报警.定时开门.离线刷卡等功能 1.远程开门: 目前用cli创建个临时客户端连接服务端发送命令,服务端处理完成后客户端 ...

  7. odoo8 报表页面修改和字体设置

    版本8.0, 想要发票修改报表页眉的内容,去公司设置下修改,返现无论如何也不生效. 放狗后得知: You probably already know that you can customise th ...

  8. Python/WSGI 应用快速入门--转

    http://uwsgi-docs-cn.readthedocs.io/zh_CN/latest/WSGIquickstart.html 这个快速入门指南将会向你展示如何部署简单的 WSGI 应用和普 ...

  9. nodejs express session用法（含保存到redis）

    普通用法: var express = require('express'); var session = require('express-session'); var app = express( ...

  10. DB2中横表纵表互换

    1.列转行:创建一个如下的表drop table dwtmp.tmp_xn_lsb; create table dwtmp.tmp_xn_lsb ( year      int ,quarter   ...