实现js的base64的编码解码

fss/www/index.html

@@ -38,6 +38,11 @@
 			background-color: #da1616;
 		}
 
+		.hsval {
+			font-size: 10px;
+			margin-left: 16px;
+		}
+
 		.folder-icon {
 			mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyAgcHJlc2VydmVBc3BlY3RSYXRpbz0neE1pZFlNaWQgbWVldCcgIHZpZXdCb3g9IjAgMCAyNCAyNCIgPjxwYXRoIGQ9Ik0xMCA0SDRDMi45IDQgMiA0LjkgMiA2VjE4QzIgMTkuMSAyLjkgMjAgNCAyMEgyMEMyMS4xIDIwIDIyIDE5LjEgMjIgMThWOEMyMiA2LjkgMjEuMSA2IDIwIDZIMTJMMTAgNFoiIC8+PC9zdmc+");
 			-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyAgcHJlc2VydmVBc3BlY3RSYXRpbz0neE1pZFlNaWQgbWVldCcgIHZpZXdCb3g9IjAgMCAyNCAyNCIgPjxwYXRoIGQ9Ik0xMCA0SDRDMi45IDQgMiA0LjkgMiA2VjE4QzIgMTkuMSAyLjkgMjAgNCAyMEgyMEMyMS4xIDIwIDIyIDE5LjEgMjIgMThWOEMyMiA2LjkgMjEuMSA2IDIwIDZIMTJMMTAgNFoiIC8+PC9zdmc+");
@@ -51,6 +56,11 @@
 			background-repeat: no-repeat;
 			background-color: #0e0b8b;
 		}
+
+		#rstatus {
+			height: 360px;
+			overflow-y: auto;
+		}
 	</style>
 </head>
 
@@ -59,7 +69,7 @@
 	<div class="jumbotron">
 		<div class="container">
 			<p>文件更新控制台</p>
-			<p>ver:2.04</p>
+			<p>ver:3.04</p>
 		</div>
 	</div>
 
@@ -75,7 +85,7 @@
 		<div class="form-group">
 			<div class="input-group">
 				<div class="input-group-addon">监视目录</div>
-				<input type="text" class="form-control" name="sdir" id="" placeholder="eg :/www/wwwroot/aa_com/" />
+				<input type="text" class="form-control" name="sdir" placeholder="eg :/www/wwwroot/aa_com/" />
 			</div>
 		</div>
 
@@ -115,7 +125,7 @@
 							<input type="checkbox" name="sfiles" />
 							<span class="icon file-icon"></span>
 							<a href="#">fa.php</a>
-							<span>HASh:98986</span>
+							<span class="hsval">HASh:98986</span>
 						</div>
 						<div class="col-md-2">
 							<a href="#" class="btn btn-primary btn-sm">同步</a>
@@ -147,7 +157,7 @@
 		</div>
 
 		<div class="form-group col-md-12">
-			<button type="button" id="entsip" class="btn btn-primary">查看信息</button>
+			<button type="button" id="tentsip" class="btn btn-primary">查看信息</button>
 		</div>
 		<!-- 目标服务器 -->
 		<div class="col-md-12">
@@ -169,19 +179,13 @@
 
 	<!-- 状态信息 -->
 	<div class="container">
-
+		<div class="col-md-12">
+			<p>1、获取远程服务器的文件信息,2、校验hash值3、枚举出所有hash不同的文件4、勾选文件更新即可5、根据勾选的文件制作更新zip文件，发送到目标服务器。文件的参考HASH值，如何同步到几个平台？</p>
+		</div>
 		<div class="panel">
 			<div class="panel-heading">运行状态</div>
 			<div class="panel-body">
-				<ul class="list-group" id="rstatus">
-					<li class="list-group-item">1、获取远程服务器的文件信息</li>
-					<li class="list-group-item">2、校验hash值</li>
-					<li class="list-group-item">3、枚举出所有hash不同的文件</li>
-					<li class="list-group-item">4、勾选文件更新即可</li>
-					<li class="list-group-item">5、根据勾选的文件制作更新zip文件，发送到目标服务器</li>
-					<li class="list-group-item">文件的参考HASH值，如何同步到几个平台？</li>
-
-				</ul>
+				<ul class="list-group" id="rstatus"></ul>
 			</div>
 		</div>
 
@@ -205,16 +209,23 @@
 			}
 
 			// click function 
-			$("#entsip").on("click", function () {
+			$("#tentsip").on("click", function () {
 				tgfs();
 			})
 
 			// 目标服务器的文件信息
 			var tgfs = function () {
 				//
-				scip = $("#scip").val();
+				scip = $("input[name='tsip']").val();
 				// ip storage
 				sessionStorage.setItem("scip", scip);
+				//监视目录
+				var jsdir = $("input[name='tsdir']").val();
+				if (jsdir != '') {
+					urlpath = encodeURIComponent(btoa(jsdir));
+				}
+				// 
+
 
 				var html = "<li class=\"list-group-item\">输入目标服务器" + scip + "</li>";
 				// 目标站
@@ -238,7 +249,8 @@
 						if (v.dirflag) {
 							html += "<span class=\"icon folder-icon\"></span>" + v.fname + "</div>";
 						} else {
-							html += "<span class=\"icon file-icon\"></span>" + v.fname + "</div>";
+							html += "<span class=\"icon file-icon\"></span>" + v.fname +
+								"<span class=\"hsval\">HASH:" + v.hash + "</span></div>";
 						}
 
 						if (v.isbackup == 1) {
@@ -254,7 +266,8 @@
 					writelog(scip + "获取数据:" + res.data.list.length + "条数据")
 					// 客户端监控目录
 					$("#sc01").text(res.workdir);
-					$("#sc02").text(res.curdir);
+
+					$("#sc02").text(dbsresp(res.curdir));
 				});
 			}
 
@@ -318,6 +331,33 @@
 				alert(swval);
 			});
 
+			//base64 编码防止请求错误
+			var bsrqst = function (path) {
+				return encodeURIComponent(btoa(path));
+			}
+			//解码base64
+			var dbsresp = function (bsStr) {
+				console.log("respone base64 string ",bsStr)
+				return decodeURIComponent(atob(bsStr))
+			}
+
+			// 另外的base64的解码 
+			function safeAtob(base64Str) {
+				// 检查输入字符串是否是有效的Base64编码
+				const base64Regex = /^[A-Za-z0-9+/]+={0,2}$/;
+				if (!base64Regex.test(base64Str)) {
+					throw new Error('The string to be decoded is not correctly encoded.');
+				}
+
+				// 如果输入字符串长度不是4的倍数，添加等号'='
+				while (base64Str.length % 4 !== 0) {
+					base64Str += '=';
+				}
+
+				return atob(base64Str);
+			}
+
+
 		});
 	</script>
 </body>