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 ...
随机推荐
- DataGear 制作Excel动态数据可视化图表
DataGear 4.1.0 版本增强了Excel数据集功能,新增了[工作表名称]项,并且支持填写参数化语法内容,使得可基于Excel多工作表,构建动态数据可视化图表. 本文以某商品三个地区的各季度销 ...
- 维基百科Wikipedia镜像网站列表（全部已被封）
序号 网址 备注 1 https://chi.jinzhao.wiki/wiki (中文版) https://en.jinzhao.wiki/wiki/Main_Page (英文版) 支持多种语言. ...
- 从零开始学Spring Boot系列-集成mybatis
在Spring Boot的应用开发中,MyBatis是一个非常流行的持久层框架,它支持定制化SQL.存储过程以及高级映射.在本篇文章中,我们将学习如何在Spring Boot项目中集成MyBatis, ...
- [转] VSCode中 Vetur插件排版Vue文件 Col 标签子标签不被缩进的问题 iview viewDesign 自动格式化
[转] VSCode中 Vetur插件排版Vue文件 Col 标签子标签不被缩进的问题 iview viewDesign 自动格式化 问题 Col标签不对齐 首先直接放解决办法 在 vsCode se ...
- Review Book for GEE(Graduate Entrance Examination)
English is made up of phrases and idioms, in the case of both written and spoken usage. When learnin ...
- 今日学习：位运算&中国剩余定理
-2^ 31的补码是-0.也就是 1000 0000 0000 0000 0000 0000 0000 0000 补码是原码取反加1 x&(-x) 是最低位为1的位为1,其余位为0. 中国剩余 ...
- 首届实时渲染3D动画创作大赛最佳人气奖？你说了算！
根据评选标准,经过评委组层层选拔,首届实时渲染3D动画创作大赛「最佳人气奖」投票开始啦!!! 本次赛事报名人数达212人,入围作品共40份,其中Omniverse组11份,专业组15份,学生组14份. ...
- 除gRPC之外的另一个选择，IceRPC-支持QUIC
作者引言 自从19年开始接处到RPC,当时完全没有相关概念,接触到的都是http,tcp等,当时公司用的是zeroc出品的ice框架,对应rpc非常强大,跨平台,跨语言.可惜的国内并不是主流,主流是g ...
- App启动流程
目录介绍 1.什么是Zygote进程 1.1 简单介绍 1.2 各个进程的先后顺序 1.3 进程作用说明 2.Zygote进程的启动流程 2.1 源码位置 2.2 ZygoteInit类的main方法 ...
- Linux快速入门(三)Linux文件管理
Linux文件操作 head head命令用于显示文件的前几行内容,可以通过-num参数展示文件前num行的内容. root@ubuntu:~# ls bb.txt cc.txt snap root@ ...