核心：

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. MySQL基础3-数据库增删改操作

    一.SQL通用语法 SQL 语法可以单行或者多行书写,以分号结尾. SQL 语句可以使用空格/缩进来增强语句的可读性. MySQL 数据库的 SQL 语句不区分大小写,关键字建议使用大写. 注释: 单 ...

  2. 【Azure Redis 缓存】Azure Redis 4.0 被扫描到漏洞，如何修补呢？

    问题描述 在安全级别要求高的公司中,任何系统都会进行安全扫描.比如Azure 云上的Redis服务,也在扫描的范围中,最后发现Redis 4.0存在以下漏洞: CVE-2019-10192:https ...

  3. 【Azure 环境】Azure 的PaaS服务如果涉及到安全漏洞问题后，我们如何确认所用服务的实例（VM：虚拟机)的操作系统已修复该补丁呢？

    问题描述 如上图中PaaS所不可见区域, 操作系统级别的内容我们并不知道具体的内容.如果当出现新的操作系统级别的安全漏洞时候,我们如何来确认当前所使用的Azure PaaS服务所在主机的OS已经修复了 ...

  4. .NET 全能 Cron 表达式解析库（支持 Cron 所有特性）

    前言 今天大姚给大家分享一个.NET 全能 Cron 表达式解析类库,支持 Cron 所有特性:TimeCrontab. Cron表达式介绍 Cron表达式是一种用于配置定时任务的时间表达式.它由一系 ...

  5. 【简历模板】极简Markdown程序员简历模板

    前言 最近在找工作,一份好的简历是敲门砖,所以跟大家分享下简洁明了大方MarkDown的简历模板和在线编辑工具 在线工具 冷熊 Java工程师简历模板 下载 点击下载 预览 个人信息 xxx/男/19 ...

  6. 软件架构（四）单体架构(Monolithic Architecture)

    系列目录 软件架构(一)概览 软件架构(二)编程语言的历史 软件架构(三)名词解释:架构.设计.风格.模式 软件架构(四)单体架构(Monolithic Architecture) 软件架构(五)分层 ...

  7. github拉项目显示timeOut

    参考:https://blog.csdn.net/qq_37424778/article/details/132018804 自己尝试在github上拉项目,但是报错LibreSSL SSL_read ...

  8. window.showModalDialog与opener及returnValue

    首先来看看 window.showModalDialog 的参数 vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatu ...

  9. FFmpeg命令行之ffplay

    一.简述 ffplay是以FFmpeg框架为基础,外加渲染音视频的库libSDL构建的媒体文件播放器. 二.命令格式 在安装了在命令行中输入如下格式的命令: ffplay [选项] ['输入文件'] ...

  10. 一个简单的RTMP服务器实现 --- RTMP与FLV

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...