这里是借助FileReader实现将文件编码为Base64后通过AJAX上传的完整攻略：
1. 读取文件
首先通过input元素选择上传的文件，使用FileReader的readAsDataURL方法将文件读取为Base64编码的url形式。代码如下：
<input type="file" id="file">
const fileInput = document.getElementById('file');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.addEventListener('load', (event) => {
const base64 = event.target.result;
console.log(base64); // 打印Base64编码的文件内容
// 可以将base64数据传递给后端进行上传
});
reader.readAsDataURL(file);
});
2. 通过AJAX上传
将读取到的Base64编码的文件内容通过AJAX异步上传到后端。需要注意的是，在传递Base64数据时需要设置Content-Type为application/x-www-form-urlencoded;charset=UTF-8，否则后端无法解析数据。代码如下：
const fileInput = document.getElementById('file');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.addEventListener('load', (event) => {
const base64 = event.target.result;
console.log(base64);
// 使用ajax将Base64数据上传到后端
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('上传成功！');
}
};
xhr.send(`data=${encodeURIComponent(base64)}`);
});
reader.readAsDataURL(file);
});
示例1: 上传图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传图片到服务器</title>
</head>
<body>
<h1>上传图片到服务器</h1>
<input type="file" id="file">
<script>
const fileInput = document.getElementById('file');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.addEventListener('load', (event) => {
const base64 = event.target.result.split(',')[1];
console.log(base64);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('上传成功！');
}
};
xhr.send(`data=${encodeURIComponent(base64)}`);
});
reader.readAsDataURL(file);
});
</script>
</body>
</html>
这个示例演示如何上传用户选择的图片文件并将其转换为Base64编码后通过AJAX上传到后端。
示例2: 上传音频
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传音频到服务器</title>
</head>
<body>
<h1>上传音频到服务器</h1>
<input type="file" id="file">
<script>
const fileInput = document.getElementById('file');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.addEventListener('load', (event) => {
const base64 = event.target.result.split(',')[1];
console.log(base64);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('上传成功！');
}
};
xhr.send(`data=${encodeURIComponent(base64)}`);
});
reader.readAsDataURL(file);
});
</script>
</body>
</html>
这个示例演示如何上传用户选择的音频文件并将其转换为Base64编码后通过AJAX上传到后端。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：借助FileReader实现将文件编码为Base64后通过AJAX上传 - Python技术站
微信扫一扫 
支付宝扫一扫 