核心：

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的更多相关文章

  1. JS任意文件转base64

    <!doctype html><html><head><meta charset="utf-8"><meta name=&qu ...

  2. js中将文件的base64转换成file并上传到服务器

    ** * @param base64Codes * 图片的base64编码 */ function sumitImageFile(base64Codes){ var form=document.for ...

  3. 前端使用js读取文件

    最近同时问我js能不能读取本地文件: 想起以前看到js读取本地文件的文章,然后自己写了个demo. ps:这有点想Java的IO流,但是又有差别. 首先我们定义一个input标签type=" ...

  4. HTML5 通过文件输入框读取文件为base64文件, 并借助canvas压缩 FileReader, files, drawImage

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 微信小程序存放视频文件到阿里云用到算法js脚本文件

           peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...

  6. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  7. web主题公园版权信息破解:script.js加密文件

    很多人会使用web主题公园网站的免费worldpress主题,但它的主题又都被加了版权信息,故意让人找不到版权信息的修改位置. 你如果去footer.php里面删除版权信息(技术支持:web主题公园) ...

  8. [django]Django的css、image和js静态文件生产环境配置

    前言:在Django中HTML文件如果采用外联的方式引入css,js文件或者image图片,一般采用<link rel="stylesheet" href="../ ...

  9. node.js grunt文件压缩

    对于前段来说,熟悉node的人其实还并不是太多,如果您想入门一门后端语言我建议还是从node入手最好. 我也是最近开始学习node,来谈谈近期对node的学习的心得. 提到node首先就是要安装一大堆 ...

  10. 详解Js中文件读取机制

    前言,文件读取是提高应用体验度的必须接口,应用场景中需求很频繁. Js处理文件读取,由于处于安全方面的考虑,在2000年以前,都是以“<input type="file"&g ...

随机推荐

  1. 【Azure Spring Cloud】在Azure Spring Apps上看见 App Memory Usage 和 jvm.menory.use 的指标的疑问及OOM

    问题描述 在Azure的Spring Cloud服务 (官名为:Spring Apps)中,在Metrics 页面中查看 App Memory Usage 和 jvm.memory.use,发现两则在 ...

  2. 【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目，应该怎么部署运行呢？

    问题描述 用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢? 问题解答 VUE通常是运行在客户端侧的JS框架. App Service 在这种场景中是以静态文件的形式提供 ...

  3. 深入解析ASP.NET Core MVC应用的模块化设计[上篇]

    ASP.NET Core MVC的"模块化"设计使我们可以构成应用的基本单元Controller定义在任意的模块(程序集)中,并在运行时动态加载和卸载.这种为"飞行中的飞 ...

  4. Toyota Programming Contest 2024#2（AtCoder Beginner Contest 341）D - Only one of two（数论、二分）

    目录 链接 题面 题意 题解 代码 总结 链接 D - Only one of two 题面 题意 求第\(k\)个只能被\(N\)或\(M\)整除的数 题解 \([1,x]\)中的能被\(n\)整除 ...

  5. Delete `␍`

    新电脑遇到的问题 Delete `␍`eslint(prettier/prettier) 网上一搜,一堆解决办法,没有一个说到点子上,都是表面上如何避免,如何设置VSCODE... 都知道是换行符的问 ...

  6. java线程示例

    需要开启线程 的方法继承线程类,并在run  中写逻辑 public class Ant extends Thread{ Cake cake; public Ant(String name,Cake ...

  7. 基于STM32F407MAC与DP83848实现以太网通讯一（STM32以太网（ETH）外设）

    STM32F4xx 可以通过以太网按照 IEEE 802.3-2002 标准发送和接收数据.支持与外部物理层 (PHY) 相连的两个工业标准接口:默认情况下使用的介质独立接口 (MII)(在 IEEE ...

  8. vite ts 安装 js-cookie 库，vscode找不到类型说明（有波浪线），解决方案

    vite ts 安装 js-cookie 库,vscode找不到类型说明(有波浪线),解决方案 先安装库 https://www.npmjs.com/package/js-cookie 再安装类型 h ...

  9. Vue.prototype.$app = this vscode ctrl 点击 不跳转

    Vue.prototype.$app = this vscode ctrl 点击 不跳转 解决思路 src/types/vue.d.ts 里面写,具体还没解决,找到一篇 在js里面的 我这种直接将当前 ...

  10. shell脚本中将 IFS (Internal Field Separator 内部字段分隔符)替换为换行符

    将 IFS 中的空白符(换行.制表符.空格)修改为仅包含换行 IFS 是shell中的内部变量,在使用 for var in var_list;do use $var do something don ...