创建Base64图片

最新推荐文章于 2025-12-22 19:57:02 发布

原创最新推荐文章于 2025-12-22 19:57:02 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #图片相关功能

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="addPic">添加图片</button>
		<img style="max-width: 200px;" id="showPic" src="">
		<script>
			document.getElementById('addPic').addEventListener('click', () => {
				// 创建一个文件输入框
				const input = document.createElement('input');
				input.type = 'file';
				input.accept = 'image/*'; // 只允许选择图片文件
				input.click(); // 触发文件选择框

				// 为文件输入框添加变化事件监听器
				input.onchange = () => {
					if (input.files.length === 0) return;

					// 获取选中的文件
					const file = input.files[0];
					const reader = new FileReader();

					// 为文件读取器添加加载完成事件监听器
					reader.onload = function() {
						// 使用 base64 数据插入图片（本地预览）
						document.getElementById('showPic').src=reader.result;
					};

					// 将图片文件转换为 base64 数据
					reader.readAsDataURL(file); // 将图片转为 base64
				};

			});
		</script>
	</body>
</html>