首页 > 其他分享 >前端将图片转为base64编码

前端将图片转为base64编码

时间:2023-08-09 14:11:28浏览次数:28  
标签:编码 前端 base64 result file reader var

<script type="text/javascript">         function readAsBase64() {             var file = document.getElementById("imagefile").files[0];             var reader = new FileReader();             reader.readAsDataURL(file);             reader.onload = function (e) {                 var result = document.getElementById("result");                 console.log(this.result);           //base64编码格式                 // result.innerHTML='<img src="'+this.result+'" alt=""/>'             }
        }     </script> <body>     <p>         <label>请选择一个文件:</label>         <input type="file" id="imagefile" />         <br/>         <input type="button" value="读取图像" onClick="readAsBase64();" />     </p>     <div name="result" id="result">         <!-- 这里用来显示图片结果-->     </div> </body>

 

标签:编码,前端,base64,result,file,reader,var
From: https://www.cnblogs.com/auroraQ/p/17616717.html

相关文章

  • 微前端框架哪个好?QianKun还是MicroApp
    在当前云原生微服务、业务中台、低代码平台等IT架构下,不再是传统的烟囱式应用系统建设,而是打破企业业务部门竖井,建立企业级的信息化平台(数据中台、业务中台),那么对业务开发的解耦和聚合将成为关键技术,目前对于系统后端已有成熟的微服务架构,基于SpringBoot开发微服务,通过SpringCloud......
  • - 前后端数据传输的编码格式(contentType) - Ajax朝后端提交文件数据 - Ajax朝后端提
    前后端数据传输的编码格式(contentType)前后端数据传输的请求方式有两种:get、post我们只研究post请求的编码格式三种编码格式urlencodedform-datajson发送post请求的方式form表单Ajaxpostman(第三方工具,需要下载) form表单发送post请求的时候数据的编码格式请求头conten......
  • 前端原型和原型链构造函数的使用
     目录前言导语代码部分运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语前端原型和原......
  • 前端原型和原型链构造函数的使用
     目录前言导语原型的构造器指向构造函数 原型上添加方法注意的地方构造器指向构造函数本身总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌......
  • 记录--前端实用小技巧: 自动合并的网络请求
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助我们经常会遇到一个场景,比如在一个列表中批量获取用户的信息。 如果我们一次性往后端发送几十条请求是非常愚蠢的事情。此时我们就要学会如何使用批量获取的逻辑。但是批量获取有一个问题就是,我需要在用户列表......
  • 前端基础-数组方法
    数组方法备忘单:添加/删除元素:push(...items) ——向尾端添加元素,pop() ——从尾端提取一个元素,shift() ——从首端提取一个元素,unshift(...items) ——向首端添加元素,splice(pos,deleteCount,...items) ——从 pos 开始删除 deleteCount 个元素,并插入 i......
  • 前端实现文件夹的上传和下载
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传  可以带参数        [HttpPost("upload")]        publicJsonResultuploadProject(I......
  • 山东布谷科技直播系统源码热点分析:不同芯片实现高质量编码与渲染视频的GPU加速功能
    在现代科技的迅猛发展下,直播系统源码平台被开发搭建出来,为人们的生活方式带来了很大的改变,直播系统源码平台的好友、短视频、直播、社区等功能让很多人越来越热衷于去在平台上刷视频、看直播、分享生活。用户的喜爱也督促了直播系统源码平台要往更高质量上发展,图像质量与系统性能......
  • 前后端数据传输的编码格式,Ajax提交json格式的数据,Ajax提交文件数据,AJax结合layer弹
    前后端数据传输的编码格式(contentType)#前后端数据传输的时候请求方式有2种:getpost我们不研究get请求的url?a=1&b=2#我们只研究post请求的编码格式三种编码格式:urlencodedform-datajson#可以通过哪些方式发送post请求form表单Ajaxpostman请求头中的Content-......
  • docker容器出现编码错误
    容器运行出现UnicodeEncodeError:'ascii'codeccan'tencodecharactersinposition0-2:ordinalnotinrange(256)问题原因是打印的内容有中文,编码出现问题Dockerfile中,添加一行,设置环境变量,重新构建镜像,启动容器即可解决ENVLC_ALL=C.UTF-8......