文章详情
原生js将上传的图片转为base64编码显示
Posted on 2024-09-12 05:02:29 by 主打一个C++
//项目需求片段，不想存服务器，直接转为硬编码，代码仅供参考。
//创建一个标准的html文件，一个上传按钮，一个用于显示的img标签，一个用于显示转换后的base64图像编码的textarea标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片转Base64</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
text-align: center;
}
</style>
</head>
<body>
<h1>上传图片并转换为Base64编码</h1>
<input type="file" id="imageInput" accept="image/*">
<br><br>
<img id="preview" src="" alt="预览图片" style="max-width: 300px;">
<br><br>
<textarea id="base64Text" rows="10" cols="50" readonly></textarea>
</body>
</html>//js部分，监听file输入，直接显示到img-src
<script>
document.getElementById('imageInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const base64String = e.target.result;
document.getElementById('preview').src = base64String;
document.getElementById('base64Text').value = base64String;
};
reader.readAsDataURL(file);
}
});
</script>//测试结果
*转载请注明出处：原文链接：https://cpp.vin/page/33.html
