首页 > 其他分享 >JS实现文件转base64

JS实现文件转base64

时间:2023-07-29 14:34:27浏览次数:21  
标签:function 文件 base64 JS fileAddress file files

 

核心:

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>

 

 

 

标签:function,文件,base64,JS,fileAddress,file,files
From: https://www.cnblogs.com/shiyixirui/p/17589765.html

相关文章

  • 文件拼接
    importjava.io.*;importjava.nio.channels.FileChannel;importjava.util.ArrayList;importjava.util.List;publicclassMain{privatestaticStringFILE_PATH="D:\\BaiduNetdiskDownload\\test";privatestaticStringDEST_FILE_PATH......
  • JS逆向常用HOOK代码
    //hook FunctionFunction.prototype._constructor=Function.prototype.constructor;Function.prototype.constructor=function(){if(arguments&&typeofarguments[0]==='string'){if("debugger"===arguments[0]){......
  • 通过js动态改变样式、改变伪类样式
    1、设置变量2、使用变量3、动态设置变量......
  • .NetCore中dump文件的创建和分析
    1、通过程序生成dump文件  安装nuget包:Microsoft.Diagnostics.NETCore.Client  生成dump文件代码:  varclient=newDiagnosticsClient(Environment.ProcessId);client.WriteDump(DumpType.Full,Path.Combine(AppDomain.CurrentDomain.BaseDirectory,"dumps","1.dump&quo......
  • linux获取子文件和子目录
    linux获取子文件和子目录#include<dirent.h>#include<sys/stat.h>#include<string>#include<vector>#include<stdio.h>//#include<android/log.h>#defineTAG"[demo]"//#defineLOGD(...)__android_log_print(AND......
  • CTFer成长记录——CTF之Web专题·攻防世界—fileinclude·好多文件呀
    一、题目链接https://adworld.xctf.org.cn/challenges/list二、解法步骤  WRONGWAY!<?phpinclude("flag.php");highlight_file(__FILE__);if(isset($_GET["file1"])&&isset($_GET["file2"])){$file1=$_GET["file1"......
  • linux tar命令之小知识-解压指定层级目录以及指定文件
    我们以解压k8s二进制源码文件为例,只解压出第三层级目录下的kube-apiserver、kube-controller-manager、kubectl、kubelet、kube-proxy、kube-scheduler这几个文件。k8s源码文件目录结构,目录实在太多了,我删除了大部分,不在这里显示[root@k8s-master01tmp]#treekubernetesku......
  • JSON格式问题
    引发了具有根本原因的异常Requestprocessingfailed;nestedexceptioniscom.alibaba.fastjson.JSONException:syntaxerror,positionat45,namestatus com.alibaba.fastjson.JSONException:syntaxerror,positionat45,namestatus原因是我写的格式不是json格式......
  • 基于Python实现RLE格式分割标注文件的格式转换
    下面我将详细讲解“基于Python实现RLE格式分割标注文件的格式转换”的完整攻略。一、RLE格式分割标注文件是什么?RLE格式是一种更加高效的图像语义分割数据表示格式,其数据以一串RLE编码的方式进行存储,而不是以像素点的形式存储,有效减少了数据的体积。RLE格式分割标注文件即是使......
  • Three.js 尝试渲染水体等对象时出现 Can not resolve #include <colorspace_fragment>
    对Water对象渲染时出现Cannotresolve#include<colorspace_fragment> atincludeReplacer(WebGLProgram.js:220:1)....查询发现是库文件中conststring=ShaderChunk[include];该变量的值变为null,使程序错误(此时include的值为 colorspace_fragment)查询Shade......