任意文件转base64-直接拖进来_任意文件base64 拖进来-优快云博客

本文链接：https://blog.youkuaiyun.com/u011403174/article/details/97040201

本文介绍了一个简单的网页工具，允许用户通过拖拽方式上传文件，并即时转换为Base64编码格式显示在页面上。该工具使用了HTML5的FileReader API实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下:

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <meta name="description" content="在线Base64生成转换小工具，可以实现任意文件转Base64 Data-URI编码，文件往页面中一拖即可。" /> 
  <meta name="keywords" content="base64, FileReader, readAsDataURL, 文件" /> 
  <meta name="author" content="大佬" /> 
  <title>任意文件转base64-直接拖进来</title> 
  <style>
			body {
				word-break: break-all;
				margin: 0 1em;
				min-height: 100vh;
				font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; overflow: hidden;
			}
			.empty::before{
				position: absolute;
				font-size: 50px;
				content: '任意文件\A拖到这里';
				white-space: pre;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%); color: gray;
			}
		</style> 
 </head> 
 <body class="empty"> 
  <script>
		window.addEventListener("dragenter", function(event) {
		event.preventDefault(); }, false);
		window.addEventListener("dragover", function(event) { event.preventDefault(); }, false);
		window.addEventListener("drop", function(event) {
		    var reader = new FileReader();
		    reader.onload = function(e) {
		      document.body.insertAdjacentHTML("afterBegin", '<p>' + e.target.result + '</p>');
			  document.body.classList.remove('empty');
		    };
		    reader.readAsDataURL(event.dataTransfer.files[0]);
			event.preventDefault();
		}, false);
	</script> 
  <script>
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-11205167-1']);
	_gaq.push(['_trackPageview']);
	(function() {
		var ga = document.createElement('script');
		ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
	</script>  
 </body>
</html>