Base64 HTML

最新推荐文章于 2024-07-18 15:24:52 发布

The Eighth

最新推荐文章于 2024-07-18 15:24:52 发布

阅读量135

点赞数

分类专栏： Cpp 文章标签： base64

本文链接：https://blog.csdn.net/weixin_45258996/article/details/108622769

版权

Cpp 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

Base64 HTML代码：

base64在线转换工具

	<style type="text/css">
		
		/*清除浏览器的默认样式*/
		*{
			margin: 0;
			padding: 0;
		}
		
		
		/*
		 * 定义选择栏样式
		 */
		.select_menu{
			height: 30px;
			width: 800px;
			background-color: cornflowerblue;
			margin: 30px auto 3px;
		}
		
		.content{
			height: 600px;
			width: 800px;
			margin: 0 auto;
		}
		
		li{
			list-style: none;       /*清除li前的标记*/
			cursor: pointer;      /*当光标在li上时，让光标按照小手鼠标样子进行显示*/
		}
		
		.select_menu li{
			float:left;          /*设置浮动---两个li就可以在一行进行显示*/
			height: 30px;
			width: 50%;
			text-align: center;      /*让li上的字体居中*/
			color: white;              /*让li上的字体是白色*/
			font-weight: bold;   /*让li上字体加粗*/
		}
		
		/*给select_menu 类名下的li元素设置hover事件*/
		.select_menu li:hover{
			background-color: red;
		}
		
		.page_1{
			width:100%;
			height: 100%;
			display: block;
		}
		
		.page_2{
			width:100%;
			height: 100%;
			display: none;
		}
		
		.content_left{
			width: 300px;
			height: 100%;
			float:left;
		}
		
		.content_mid{
			width: 200px;
			height: 100%;
			float:left;
			text-align: center;
		}
		
		.content_right{
			width: 300px;
			height: 100%;
			float:left;
		}
		
		.text{
			width: 100%;
			height: 100%;
			resize: none;
		}
		
		.btn_op{
			background-color: lightblue;
			display: block;
			margin: 30px auto;
		}
		
		.pictextarea{
			width:800px;
			height: 600px;
		}
	</style>
</head>
<body>
	<!--选择具体操作功能菜单-->
	<div class="select_menu">
		<ul>
			<li onclick="select_op(true)">文本base64转换</li>
			<li onclick="select_op(false)">图片base64转换</li>
		</ul>
	</div>
	
	
	<!--显示具体 文本转base64 和  图片转base64内容区-->
	<div class="content">
		<div id="text2base64" class="page_1">
			
			<!--左侧的文本框-->
			<div class="content_left">
				<textarea id="strTextarea" class="text">我是一个textarea</textarea>
			</div>
			
			
			<!--操作的按钮-->
			<div class="content_mid">
				<button class="btn_op" onclick="Str2Base64()">文本转base64</button>
				<button class="btn_op" onclick="Base642Str()">base64转文本</button>
			</div>
			
			<!--右侧base64文本框-->
			<div class="content_right">
				<textarea id="base64Data" class="text">我是一个textarea</textarea>
			</div>
			
		</div>
	   <div id="pic2base64" class="page_2">
	   	<form  method="POST" action="", enctype="multipart/form-data" style="float:left">
	   		<input  id="picData" type="file" name="file" />
	   	</form>
	   	
	   	<button onclick="Pic2Base64()">图片转base64</button>
	   	<p>base64图片数据</p>
	   	<textarea id="pic_base64_data" class="pictextarea"></textarea>
	   	
	   	<!--在该div中显式base64的图片呢-->
	   	<div id="base64_pic"></div>
	   </div>
	</div>
	
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<script>
		
		function select_op(op)
		{
			// op是true：表示选择的是文本转base64
			//         false: 表示选择的是图片转base64
			if(op)
			{
				document.getElementById("text2base64").style.display="block";
				document.getElementById("pic2base64").style.display="none";
			}
			else
			{
				document.getElementById("text2base64").style.display="none";
				document.getElementById("pic2base64").style.display="block";
			}
		}
		
		function Str2Base64()
		{
			// 1. 先从网页textarea中获取文本数据
			var strData = document.getElementById("strTextarea").value;
			
			// 2. 构造Post请求 发送给服务器
			$.ajax({
				type:"POST",
				url:"/str_2_base64",
				data: JSON.stringify({"strtextdata":strData}),
				dataType: "json",    // 约定服务器响应包中数据的格式json
				success: function(result)
				{
					// result中保存的就是转换结果的JSon格式数据
					$("#base64Data").val(result["base64Data"]);
				},
				error:function(result)
				{
					alert("str2base64 失败");
				}
			});
		}
		
		function Base642Str()
		{
			// 1. 先从网页textarea中获取文本数据
			var strData = document.getElementById("base64Data").value;
			alert(strData);
			// 2. 构造Post请求 发送给服务器
			$.ajax({
				type:"POST",
				url:"/base64_2_str",
				data: JSON.stringify({"base64data":strData}),
				dataType: "json",    // 约定服务器响应包中数据的格式json
				success: function(result)
				{
					// result中保存的就是转换结果的JSon格式数据
					$("#strTextarea").val(result["strtext"]);
				},
				error:function(result)
				{
					alert("str2base64 失败");
				}
			});
		}
		
		function Pic2Base64()
		{
			// 0. 加载了图片之后，页面上只显示了图片的路径
			// 先要获取图片内容的数据
			// 1. 先从网页textarea中获取文本数据
			var formData = new FormData();
			var file = document.getElementById("picData").files[0];
			formData.append("strPicData", file);
			
			// 2. 构造Post请求 发送给服务器
			$.ajax({
				type:"POST",
				url:"/pic_2_base64",
				data: formData,
				dataType: "json",    // 约定服务器响应包中数据的格式json
				async: false,
				cache: false,
				processData: false,
				contentType:false,
				success: function(result)
				{
					// result中保存的就是转换结果的JSon格式数据
					$("#pic_base64_data").val(result["picbase64Data"]);
					
					// html()该方法表明：在当前base64pic元素中添加html代码
					$("#base64_pic").html(result["picbase64Data"]);
					//$("#base64_pic").innerHTML = result["picbase64Data"];
				},
				error:function(result)
				{
					alert("str2base64 失败");
				}
			});
		}
		
	</script>
</body>