JS任意文件转base64
<!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的更多相关文章
- js中将文件的base64转换成file并上传到服务器
** * @param base64Codes * 图片的base64编码 */ function sumitImageFile(base64Codes){ var form=document.for ...
- python 对任意文件(jpg,png,mp3,mp4)base64的编码解码
程序是事件驱动的,写博客是什么驱动的?事件? 时间?no,我承认我很懒,甚至不愿意记录总结.哪是什么驱动的? 对! 问题驱动的.遇到了问题解决了问题突然想起来搬到blog上,让遇到相同问题的可以参考下 ...
- jquery 图片文件转base64 显示
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- js将图片转为base64编码，以字符串传到后台存入数据库
(前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...
- 使用JS将图片转为Base64
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 前端使用js读取文件
最近同时问我js能不能读取本地文件: 想起以前看到js读取本地文件的文章,然后自己写了个demo. ps:这有点想Java的IO流,但是又有差别. 首先我们定义一个input标签type=" ...
- 应用服务器Glassfish任意文件读取漏洞
catalogue . 前言和技术背景 . Glassfish安装配置 . 漏洞利用 . 漏洞缓解(修复) 1. 前言和技术背景 0x1: GlassFish是什么 GlassFish 是用于构建 J ...
- Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...
- 代码审计之XiaoCms（后台任意文件上传至getshell,任意目录删除,会话固定漏洞）
0x00 前言 这段时间就一直在搞代码审计了.针对自己的审计方法做一下总结,记录一下步骤. 审计没他,基础要牢,思路要清晰,姿势要多且正. 下面是自己审计的步骤,正在逐步调整,寻求效率最高. 0x01 ...
随机推荐
- Codevs 1293 送给圣诞夜的极光
1293 送给圣诞夜的极光 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 圣诞老人回到了北极圣 ...
- IT兄弟连 JavaWeb教程 Servlet会话跟踪 Cookie路径问题
操作Cookie时,需要注意路径问题: 设置操作:任何路径都可以设置Cookie,但是有时我们也是用设置进行替换Cookie和删除Cookie(maxAge=0)! 替换:只能由完全相同的路径来操作! ...
- 日志组件Log2Net的介绍和使用（附源码开源地址）
Log2Net是一个用于收集日志到数据库或文件的组件,支持.NET和.NetCore平台. 此组件自动收集系统的运行日志(服务器运行情况.在线人数等).异常日志.程序员还可以添加自定义日志. 该组件支 ...
- nginx+vue实现项目动静分离
一般的企业都会采用前后端分离的方式来开发.部署项目,这样做的好处是更好的让前后台各司其职.另外也由于nginx是一个轻量级的静态资源服务器,其高并发也是其优点之一.这样可以减轻双方服务器的压力,同时又 ...
- Jquery | 基础 | 事件的链式写法
$(".title").click(function () { $(this).addClass("curcol").next(".content&q ...
- swiper 解决动态加载数据滑动失效的问题
两种解决方法 第一种解决办法: success:function(result){ var resultdata =eval("("+result+")"); ...
- Zynq7000开发系列-1（Vivado HLx 2016.4下载及安装）
一.下载 1.访问Xilinx官方网站:www.xilinx.com,注册帐号并完善个人信息 2.点击以下选项进入下载页面:Support -> Downloads & Licensin ...
- ZOJ Seven-Segment Display 暴力dfs + 剪枝
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3954 0 = on 1 = off A seven segment ...
- 07.Javascript——入门高阶函数
高阶函数英文叫Higher-order function..JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数 ...
- IDEA Maven无法添加依赖到项目中
IDEA--------->File-------->Setting------------>Maven 勾上即可,OK啦! 完美解决了