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 ...
随机推荐
- [Rust] 数据类型的转换
数据类型的转换 类型转换的方式 Rust 提供了多种类型转换的方式. as T 用于数类型之间的转换.ixx, uxx, fxx 都可以. 注意:当溢出的时候,转换不会 panic,而是循环映射值. ...
- opencv库图像基础2-python
opencv库图像基础2-python 图像的简单变换 先导入库 import cv2 import matplotlib.pyplot as plt import numpy as np 1.图像的 ...
- 如何提高UI自动化稳定性？
1尽量使用相对路径的xpath表达式定位元素 2查找元素优先使用显示等待方式 3用例与用例之间避免产生依赖,用例可以单独运行 4用例执行结束之后要对测试场景进行还原,避免影响到其他用例的执行 5脚本执 ...
- 来也科技收购Mindsay背后：新旧势力交锋智能自动化备受关注
来也科技收购Mindsay背后:新旧势力交锋智能自动化备受关注 来也科技收购Mindsay背后:历程一波三折,意义非同寻常 来也科技收购Mindsay,国产RPA正式进军国际市场 收购Mindsay来 ...
- Codeforces Round 651 (Div. 2)C. Number Game（数学思维数论）
C. Number Game 我们考虑那些状态是必胜态 我的回合时n为奇数(除1外),直接除以n则必胜 下面偶数的情况稍复杂 偶数我们能进行的操作只有除以一个奇数,需要考虑怎么把当前状态变为对手的必败 ...
- mysql中where条件查询
#进阶2:条件查询 /* 语法: SELECT 查询列表 FROM 表名 WHERE 筛选条件: 分类: 一.按条件表达式筛选 条件运算符:> < = <> >= < ...
- python文件获取并读取固定长度数据实例解析
一 概念 1 file 操作: 文件操作一般有open,write,read,close几种,这里重点是read固定长度数据. read() 用于从文件读取指定的字节数,如果未给定或为负则读取所有. ...
- use shell scrpit to jlink download bin file
一 JLINK 下载 JLINK作为一个arm的调试工具,是很多基于arm芯片无法绕过去的调试和下载工具.这里有一个问题,就是该工具链接和使用需要的命令特别多,假如不做成脚本,会浪费很多时间,笔者花了 ...
- UDP、IMCP、ARP协议通过netmap解析的实现。
上一篇文章我们讲了一个异步的线程池大概需要如何去实现,现在的话,我们如何来解析一个UDP的包. 环境的搭配 这个环境的问题困扰了很久,这个netmap已经不再更新了,支持Ubuntu16.04-Ubu ...
- 前后端分离之Ajax入门
前后端分离之Ajax入门 一.概念 Ajax(Asynchronous Javascript And XML),即是异步的JavaScript和XML,Ajax其实就是浏览器与服务器之间的一种异步通信 ...