JS实现文件转base64
核心：
function file2base64(){
fileAddress = document.getElementById("fileImage").files[0];
file = new FileReader();
file.readAsDataURL(fileAddress);
file.onload = function(){console.log(file.result);}
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" name="" id="fileImage">
<button onclick="file2base64()">文件转base64</button>
<script>
function file2base64(){
fileAddress = document.getElementById("fileImage").files[0]; file = new FileReader();
file.readAsDataURL(fileAddress);
file.onload = function(){console.log(file.result);}
}
</script>
</body>
</html>
JS实现文件转base64的更多相关文章
- JS任意文件转base64
<!doctype html><html><head><meta charset="utf-8"><meta name=&qu ...
- js中将文件的base64转换成file并上传到服务器
** * @param base64Codes * 图片的base64编码 */ function sumitImageFile(base64Codes){ var form=document.for ...
- 前端使用js读取文件
最近同时问我js能不能读取本地文件: 想起以前看到js读取本地文件的文章,然后自己写了个demo. ps:这有点想Java的IO流,但是又有差别. 首先我们定义一个input标签type=" ...
- HTML5 通过文件输入框读取文件为base64文件, 并借助canvas压缩 FileReader, files, drawImage
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 微信小程序存放视频文件到阿里云用到算法js脚本文件
peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...
- Node.js写文件的三种方法
Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...
- web主题公园版权信息破解:script.js加密文件
很多人会使用web主题公园网站的免费worldpress主题,但它的主题又都被加了版权信息,故意让人找不到版权信息的修改位置. 你如果去footer.php里面删除版权信息(技术支持:web主题公园) ...
- [django]Django的css、image和js静态文件生产环境配置
前言:在Django中HTML文件如果采用外联的方式引入css,js文件或者image图片,一般采用<link rel="stylesheet" href="../ ...
- node.js grunt文件压缩
对于前段来说,熟悉node的人其实还并不是太多,如果您想入门一门后端语言我建议还是从node入手最好. 我也是最近开始学习node,来谈谈近期对node的学习的心得. 提到node首先就是要安装一大堆 ...
- 详解Js中文件读取机制
前言,文件读取是提高应用体验度的必须接口,应用场景中需求很频繁. Js处理文件读取,由于处于安全方面的考虑,在2000年以前,都是以“<input type="file"&g ...
随机推荐
- HTTP1.0/HTTP1.1/HTTP2.0的演进
HTTP1.0 短连接,每次请求都需要重新建立连接 不支持断点续传 HTTP1.1 支持长连接,同一个客户端连接可保持长连接,请求可在连接中顺序发出. 查看http请求头中有keepalive 参数 ...
- jvm调优监控工具jps、jstack、jmap、jhat、jstat使用详解
目录 前言 jps(Java Virtual Machine Process Status Tool) jstack jmap(Memory Map)和jhat(Java Heap Analysis ...
- RPA是啥？是干嘛的？如何入门开始使用？（一）
1.RPA是啥? 我们先对RPA有一个大概的了解,再循序渐进. Robotic Process Automation(机器人流程自动化,简称RPA). 我的简单理解就是自动化,类似于按键精灵,相对来说 ...
- 鸿蒙 Harmony 的跨端技术方案
这两年要说技术上最火的关键字,我想肯定离不开"鸿蒙"两个字. 不管是技术社区还是身边的开发者多多少少都在关注鸿蒙的发展趋势,特别是 HarmonyOS NEXT 版本将进入独立生态 ...
- 精贴总结 - Serverless 的承诺都兑现了吗
原文 - Serverless 的承诺都兑现了吗? 一.个人看法 serverless根本目的是降低成本,所以baas是核心 冷启动是关键的技术难点,也限制了faas的作用域 供应商锁定是个坑,标准化 ...
- centos解决 pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.
一.下载 openssl 编译安装 openssl 官方下载地址:https://www.openssl.org/source/ wget https://github.com/openssl/ope ...
- folder-alias vscode左侧目录树 起别名 插件 (git decorations)
folder-alias vscode左侧目录树 起别名 插件 插件 效果 不足 文件路径或目录路径中包含中文 会挂不上别名,纯英文路径没问题 有修改后,git会覆盖,不显示别名 个人意见 我的项目都 ...
- vscode 自动格式化 好使的配置 setting.json 20210622
一直用idea,今天有个需求得用vscode,发现格式化不好使了 用 vetur 格式化 结果带分行什么的,eslint 过去不了,更新了个好使的配置,记录一下. { "update.mod ...
- nginx proxy_set_header详解
proxy_set_header 是 Nginx 配置中的一个重要指令,特别是在使用 Nginx 作为反向代理时.该指令允许你修改由 Nginx 传递给代理后端的请求头.这对于确保后端应用程序能够接收 ...
- SQL注入的原理与分析
SQL注入的原理与分析 1.SQL注入的本质 2.部分SQL语句 3.SQL注入流程 一.SQL注入的本质 SQL注入的本质,就是把用户输入的数据当作代码执行 Web应用程序对用户输入的数据校验处理不 ...