首页 > 其他分享 >js上传base64

js上传base64

时间:2024-07-19 18:21:21浏览次数:17  
标签:const base64 js fileInput xhr file reader 上传 event

<!DOCTYPE html>

<html>
<head>
<title>Upload Image</title>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="uploadImage()">Upload Image</button>

<script>
function uploadImage() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];

const reader = new FileReader();
reader.onload = function(event) {
const base64Data = event.target.result;

// 发送 Base64 数据到后端
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://your-backend-url/upload', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ image: base64Data }));
};

reader.readAsDataURL(file);
}
</script>
</body>
</html>

标签:const,base64,js,fileInput,xhr,file,reader,上传,event
From: https://www.cnblogs.com/unique-yaobo/p/18312083

相关文章

  • 前端太卷了,不玩了,写写node.js全栈涨工资,赶紧学起来吧!!!!!
    前端太卷了,不玩了,写写node.js全栈涨工资,赶紧学起来吧!!!!!首先聊下node.js的优缺点和应用场景Node.js的优点和应用场景Node.js作为后端开发的选择具有许多优点,以下是其中一些:高性能:Node.js采用了事件驱动、非阻塞I/O模型,使得它能够处理大量并发请求而不会阻塞线程,从而具有出色......
  • Simple WPF: S3实现MINIO大文件上传并显示上传进度
    SimpleWPF:S3实现MINIO大文件上传并显示上传进度 合集-SimpleWPF(9) 1.SimpleWPF:WPF透明窗体和鼠标事件穿透07-012.SimpleWPF:WPF自定义按钮外形07-073.SimpleWPF:WPF实现按钮的长按,短按功能07-084.SimpleWPF:WPF自定义一个可以定义步长的SpinBox07-095.Si......
  • JSON解析平铺获取数据
    datax工程源码提供Configuration提供多级JSON配置信息无损存储importcom.alibaba.fastjson2.JSON;importcom.alibaba.fastjson2.JSONWriter;importcom.zditec.system.utils.exception.CommonErrorCode;importcom.zditec.system.utils.exception.DataXException;import......
  • 初学js Day01
    JavaScript的由来(js)1995年2月发布的,NetscapeNavigator2浏览器开发一种名为LiveScript的脚本语言。为了赶在发布日期前完成LiveScript的开发,Netscape与Sun公司建立了一个开发联盟,共同开发LiveScript。在NetScapeNavigator2发布前夕,网景为了更好地推广这个脚本语言......
  • 前端太卷了,不玩了,写写node.js全栈涨工资,赶紧学起来吧!!!!!
    首先聊下node.js的优缺点和应用场景Node.js的优点和应用场景Node.js作为后端开发的选择具有许多优点,以下是其中一些:高性能:Node.js采用了事件驱动、非阻塞I/O模型,使得它能够处理大量并发请求而不会阻塞线程,从而具有出色的性能表现。轻量级和高效:Node.js的设计简洁而轻量,......
  • 【2024】SpringBoot+Vue.js协同过滤算法美食推荐小程序
     博主介绍:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌技术范围:SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大......
  • ThreeJS Shader的效果样例网格平面和网格球体(一)
    本文中效果主要采用ThreeJS 中的着色器(Shader)以及结合ShaderMaterial实现的。主要用到的内置方法有:step:是一个阶跃函数,它将一个浮点数与一个阈值进行比较,并返回一个阶跃值;比如step(edge,x), 如果x小于等于edge,则返回0.0, 如果x大于edge,则返回1.0。fract......
  • python里面加载js代码
    有一段js代码constCryptoJS=require("crypto-js")functionl(t,e){returnt.toString().toUpperCase()>e.toString().toUpperCase()?1:t.toString().toUpperCase()==e.toString().toUpperCase()?0:-1}functionu(t){for(vare=Ob......
  • elementui中使用input原生上传文件功能并提交到接口
    需求:表单中直接使用input进行文件上传,并直接传到后端表单接口 出现的问题:1.全局接口配置的请求头是application/json,要传formData需要修改请求头(不可能,绝对不可能)2.后端不单独对文件进行储存,因此无法使用独立封装的上传组件 解决方案:file转base64编码,然后通过JSON格式发送......
  • js改变this指向
    1.使用call()和apply()方法call()和apply()方法都可以用来调用一个函数,并显式地设置this的值。它们之间的主要区别是call()方法接受一个参数列表,而apply()方法接受一个包含多个参数的数组。functiongreet(greeting,punctuation){console.log(greeting+','+this......