<!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. [Xcode 实际操作]八、网络与多线程-(5)使用UIApplication对象发送邮件

    目录:[Swift]Xcode实际操作 本文将演示如何使用应用程序单例对象,发送邮件的功能. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 注:需要使用真机进行测 ...

  2. Node.js 内置模块Stream(流)

    "流"是一种抽象的数据结构 通过使用"流"可以将一段数据分割成几段,并按顺序传输,使用"流"可以降低对系统性能的要求,减少对CPU的消耗 S ...

  3. shell chpasswd 命令 修改用户密码

    使用useradd 命令增加一个用户后,它默认是没有设置密码的.如果需要给用户设置或者修改密码,一般会使用passwd命名. 但是passwd命令有一个缺陷,它需要人工交互操作. 如果你是一名系统管理 ...

  4. PJzhang:python基础入门的7个疗程-one

    猫宁!!! 参考链接:易灵微课-21天轻松掌握零基础python入门必修课-售价29元人民币 https://www.liaoxuefeng.com/wiki/1016959663602400 安全从 ...

  5. 第二十篇 .NET高级技术之C#中的线程(二) 线程同步基础

    1.同步要领 下面的表格列展了.NET对协调或同步线程动作的可用的工具:                       简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程 ...

  6. 自然语言处理（三）——PTB数据的batching方法

    参考书 <TensorFlow:实战Google深度学习框架>(第2版) 从文本文件中读取数据,并按照下面介绍的方案将数据整理成batch. 方法是:先将整个文档切分成若干连续段落,再让b ...

  7. SimpleDateFormat线程不安全（转）

    有三种方法可以解决以上安全问题.  1).使用同步 package com.bijian.study.date; import java.text.ParseException; import jav ...

  8. endless(2018.10.25)

    这题就是个线段树合并板子. #include<cstdio> #include<algorithm> #include<cstring> using namespa ...

  9. line-height与图文对齐 笔记

    基本概念: 块:block 特点独行 内联:inline 内联块:inline-block 如果元素display属性默认值为block,则为块元素.如div p 如果元素display属性默认值为i ...

  10. struts工作原理

    在struts2的应用中,从用户请求到服务器返回相应响应给用户端的过程中,包含了许多组件如:Controller.ActionProxy.ActionMapping.Configuration Man ...