使用FileReader和AJAX将文件编码为Base64后上传

最新推荐文章于 2025-12-01 16:39:52 发布

CsCufft

最新推荐文章于 2025-12-01 16:39:52 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

文章标签： ajax 前端 javascript js

本文链接：https://blog.youkuaiyun.com/CsCufft/article/details/133351451

js 专栏收录该内容

299 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何使用JavaScript的FileReader和AJAX将文件编码为Base64格式，然后上传到服务器。通过创建HTML文件输入元素，监听文件选择事件，读取文件内容并转换为Base64，再利用AJAX发送到服务器，实现了前端部分的文件上传功能。请注意，服务器端也需要相应逻辑来接收和处理Base64数据。

在JavaScript中，我们经常需要将文件上传到服务器。有时候，我们可能需要在上传之前对文件进行编码，以便能够在网络上传输。一种常见的编码方式是将文件编码为Base64格式。在本文中，我们将使用JavaScript中的FileReader和AJAX来实现这个功能。

首先，我们需要一个HTML文件输入元素，让用户选择要上传的文件。在HTML中添加以下代码：

<input type="file" id="fileInput"

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CsCufft

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

FileReader+Ajax+PHP实现异步上传图片和预览

ding_zhi_jie的专栏

12-05

3822

原理： 1.利用html5开放的FileReader来获取图片并编码 2.将编码后的数据通过ajax异步发送到PHP服务端 3.服务端接收数据后解码图片信息，利用PHP内置函数file_put_contents()生成图片并保存 4.后台操作成功后，返回给前台信息，前台预览

AJAX上传Base64编码图片

weixin_37595711的博客

12-20

7332

SSM图片上传：https://blog.youkuaiyun.com/weixin_37595711/article/details/85109381 1.html部分 <!DOCTYPE html> <html lang="en"> <head> <title>上传图片</title> </head> &l

参与评论您还未登录，请先登录后发表或查看评论

ajax图片上传（BASE64）(文件服务)

书之岁华

12-04

3282

1、前端 &amp;lt;form id=&quot;pointPhotoForm&quot; class=&quot;form-horizontal&quot; name=&quot;pointPhotoForm&quot; enctype=&quot;multipart/form-data&quot;&amp;gt; &am

Vue实现手动ajax上传并将文件转成Base64编码字符串传给后端

程序猿爱篮球

08-06

2960

Vue实现手动ajax上传并将文件转成Base64编码字符串传给后端最近初学vue项目中要用到上传功能，因为element-ui默认通过action上传，不够灵活，看了官方文档之后，改用其中属性http-request实现自定义上传（http-request：覆盖默认的上传行为，可以自定义上传的实现）先贴一下element-ui Upload 上传的属性参数说明类型默认值 action 必选参数，上传的地址 string headers 设置上传的请求头部 objec

ajax传递多个base64,有人用ajax post过base64数据吗

weixin_42517623的博客

08-05

363

var sinfo = b64;sinfo = sinfo.replace(/\+/g, "%2B");sinfo = sinfo.replace(/\&/g, "%26");var xmlhttp = null;var url = "../handler/B64toImg.ashx";if (window.ActiveXObject) {xmlhttp = new ActiveXObje...

2.html通过ajax上传base64的图片，服务端通过Servlet接收数据并在本地创建文件

岁月的童话

04-26

1975

一、应用场景本地上传一张图片，回显在img中然后点击按钮通过ajax上传到服务器，服务器拿到图片在本地保存二、前端 1.点击按钮本地上传图片，回显在img 首先打开本地文件的需求需要file类型的input，这个input一般不显示出来，用来读取本地文件。那就把这个input设置成隐藏，另外设置一个按钮，点击这个按钮触发上面这个input的onclick（）事件。选择好文件之后，i...

借助FileReader实现将文件编码为Base64后通过AJAX上传

01-21

灵光一闪，利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手，丰衣足食。前端对文件进行base64编码并通过ajax向服务器传输： <head> <meta charset=UTF-8> </...

jQuery实现文件编码成base64并通过AJAX上传的方法

12-12

本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。...灵光一闪，利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手，丰衣足食。前端对文件进行base64编码并通过aj

用fileReader ,ajax 上传图片并实时显示

yournevermore的博客

11-25

1234

function uploadimg(source){ var file = source.files[0]; if (file) { var reader = new FileReader(); reader.onload= function ( event ) { avatar = event.target.result...

使用FormData对象使用$.(ajax)传文件,使用filereader预览

HAZER644的博客

07-05

660

<我是菜鸟——简单快捷无原理> 要是你不小心看到我的，有更更更好的理解和方法，一定要告诉我。 ①<input>file标签属性的隐藏因为input上传的时候，标签后面会跟路径，这个样式是很丑的，然而无法改变样式，所以使用<label for=“<input>的id”>来设置样式。 ②在使用append（）方法的时候...

filereader php,AJAX_File, FileReader 和 Ajax 文件上传实例分析(php)，File FileReader 可以干什么？ Ajax...

weixin_39622178的博客

03-26

122

File FileReader 可以干什么？Ajax文件上传例子FileReader 对象可以读取文件的 Base64编码数据(readAsDataURL)，2进制字符串(readAsBinaryString)，文本(readAsText)并且都是异步的。对了，Email拖拽附件上传就可以利用 FileReader 配合 Ajax 完成。File 对象File对象可以从 input[type=fi...

File, FileReader 和 Ajax 文件上传实例分析(php)

01-27

File, FileReader 和 Ajax 文件上传实例分析(php),需要的朋友可以参考下。

h5图片上传简易版（FileReader+FormData+ajax）

weixin_33709364的博客

07-08

193

一、选择图片（input的file类型） <input type="file" id="inputImg"> 1. input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口；file类型的input会有files属性，保存着文件的相关信息。 2. input.files是一个数组，由传入的file对象组成。每个file对象包含以下属性： las...

原生js使用FileReader将文件转成base64

杨树林er的博客

01-14

7424

一、FileReader介绍 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。可以使用File对象指定要读取的文件。 File对象可以是来自用户在一个type类型为file的input元素上选择文件后返回的FileList对象。注意： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容，它不能用于从文件系统中直接使用路径名简单地读取文件。二、FileReader的使用 FileReader是一个构造函数，

ajax上传文件，使用formData与fileReader

Dilomen的博客

11-09

844

<form action="" enctype="multipart/form-data"> <input type="file" id="file" onchange="addFile()"> </form> 添加multiple属性，就可上传多个文件 function addFile(){ let fi

php中file对象实例,AJAX_File, FileReader 和 Ajax 文件上传实例分析(php)，File FileReader 可以干什么？ Ajax - phpStudy...

weixin_39614675的博客

03-12

176

File, FileReader 和 Ajax 文件上传实例分析(php)File FileReader 可以干什么？Ajax文件上传例子FileReader 对象可以读取文件的 Base64编码数据(readAsDataURL)，2进制字符串(readAsBinaryString)，文本(readAsText)并且都是异步的。对了，Email拖拽附件上传就可以利用 FileReader 配合 A...

ajax利用FormData、FileReader实现多文件上传php获取

weixin_34247155的博客

11-16

216

一、FormData方式前台代码（注意，不需要用到form标签）： a. html部分： b. js部分： c. 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&lt...

Jquery中使用ajax传json参数并从SpringBoot后台Controller返回消息