利用javascript实现可视化数据备份[原创]

最新推荐文章于 2022-11-17 15:44:19 发布
最新推荐文章于 2022-11-17 15:44:19 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript 数据备份 function button path input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxub/article/details/148370
版权

　　前些时候，做了个数据备份功能。一般的话，我们用一些可视化编程工具很快就可以实现，我做的是用javascript实现分区、目录的查看，这里只讲目录备份，且要备份的目录已经定了，选取的是要备份到的地方，要实现单个文件的备份，可以改几个函数实现，这里不多说。
　　废话不多说了，代码如下：
　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用javascript实现可视化数据备份</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function GP_popupConfirmMsg(msg) { //v1.0
  document.MM_returnValue = confirm(msg);
}
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function LegalInput(s)
    {
    var patrn=/^[^/s]+$/;   //匹配任何头尾不是空白字符，包括空格、制表符、换页符等所形成的字符串.
 if (patrn.exec(s)) return true
 else return false; 
    }
 
function insertButton()
{
 var str="",str2="";
 str="<input type='button' name='Submit' value='新建目录' onClick='SetNewFolder(view.value)' style='FONT-SIZE: 12px;'>&nbsp;&nbsp;";
 str+="<input type='button' name='button2' value='开始备份' onClick='GP_popupConfirmMsg(/"确认在 [ /"+document.CurrentFolder+/" ] 下备份吗?/");if (document.MM_returnValue) {bakFiles(view.value)}' style='FONT-SIZE: 12px;'>&nbsp;&nbsp;";
 str+="<input type='button' name='button3' value='开始还原' onClick='GP_popupConfirmMsg(/"确认还原为 [ /"+document.CurrentFolder+/" ] 中的文件吗?/");if (document.MM_returnValue) {RecoverFiles(view.value)}' style='FONT-SIZE: 12px;'>&nbsp;&nbsp;";
 str+="<input type='button' name='button4' value='删除该备份' onClick='GP_popupConfirmMsg(/"确认删除备份在 [ /"+document.CurrentFolder+/" ] 中的文件吗?/");if (document.MM_returnValue) {DeleteBakFolder(view.value)}' style='FONT-SIZE: 12px;'>";
 window.tbutton.innerHTML=str;
 str2="<span class='style1'>您所选择的文件夹为:</span>      <input name='view' type='text' id='view' size='71' readonly='true' style='border:1px black solid;FONT-SIZE: 12px;color:#336699;background-color:#F7F3DE'>";
 window.ShowView.innerHTML=str2;
}
function FolderIsExists(fldr)　　//判断文件夹是否存在
{
   var fso;
   fso = new ActiveXObject("Scripting.FileSystemObject");
   if (fso.FolderExists(fldr))
    { return true;}
  else
    { return false;}     
}

function ShowParentFolderName(filespec)    //显示上级目录
   {
     var fso, s = "";
     fso = new ActiveXObject("Scripting.FileSystemObject");
     s += fso.GetParentFolderName(filespec);
     return(s);
   }
function ShowDriveList()    //显示分区结构
{
   var fso, s, n, e, x,drvarr,i;
   document.CurrentFolder="";
   i=0;
   drvarr=new Array(27);
   fso = new ActiveXObject("Scripting.FileSystemObject");
   e = new Enumerator(fso.Drives);
   s = "";
   drvarr[i]="<OPTION value='' selected>请先选择驱动器盘符</OPTION>";
   i+=1;
   for (; !e.atEnd(); e.moveNext())
   {
      x = e.item();
   s="";
      s = s + x.DriveLetter;
      s += " - ";
      if (x.IsReady)
       {
   n = x.VolumeName;
         s +=n;
      drvarr[i] ="<OPTION value="+x.DriveLetter+"://"+">"+s+"</OPTION>";
      i+=1;
    }   
   }
   window.Drv.innerHTML="<SELECT ID='DrvList' style='width:150px;FONT-SIZE: 12px;color:#336699;background-color:#F7F3DE' onChange='if (this.value) {insertButton();view.value=this.value;document.CurrentFolder=this.value;ShowFolderList(this.value)}' >"+drvarr.join()+"</SELECT>"
}
 function ShowFolderList(folderspec)    //显示目录结构
 {
   var fso, f, fc, s,folderarr,i;
   try {
     fso = new ActiveXObject("Scripting.FileSystemObject");
     f = fso.GetFolder(folderspec);
     fc = new Enumerator(f.SubFolders);
     s = "";
     i=0;
     folderarr=new Array();
     if (ShowParentFolderName(document.CurrentFolder))
     {
       folderarr[i] ="<OPTION value="+ShowParentFolderName(document.CurrentFolder)+">双击这里返回上一级目录</OPTION>";
       i+=1;
     }
     for (; !fc.atEnd(); fc.moveNext())
     {
      s=fc.item();
   folderarr[i] ="<OPTION value="+s+">"+s+"</OPTION>";
   i+=1;  
     }
        window.Folder.innerHTML="<SELECT ID='FoldList' size='20' style='width:560px;FONT-SIZE: 12px;color:#336699;background-color:#F7F3DE' onClick='if (FolderIsExists(this.value)) {document.CurrentFolder=this.value;view.value=CurrentFolder;} else {if (this.value) {alert(/"不能选择含有空格的目录或当前目录已被删除!/");}}' onDblClick='if (FolderIsExists(this.value)) {document.CurrentFolder=this.value;view.value=CurrentFolder;ShowFolderList(this.value)} else {if (this.value) alert(/"所选择的目录不能含有空格，请确认!/")}'>"+folderarr.join()+"</SELECT>";
  }
 catch (e)
   {
      alert("没选择目录或所选择的目录含有空格，请重新选择!")}
}
 function SetNewFile(Path)    //新建立一个文件,以确认是备份所在文件夹
   {
      var fso = new ActiveXObject("Scripting.FileSystemObject");
   var TargetFile=Path+"//RP_Bak.confirm";
      var a = fso.CreateTextFile(TargetFile, true);
      a.WriteLine("This is the RP_Bak confirm.");
      a.Close();
 }
 function DeleteBakFolder(Path)     //删除备份文件夹
   {
      var fso = new ActiveXObject("Scripting.FileSystemObject");
   var ConfirmFile=Path+"//RP_Bak.confirm";
   if (fso.FileExists(ConfirmFile))
     {
    fso.DeleteFolder(Path,true);
    document.CurrentFolder=ShowParentFolderName(Path)
    ShowFolderList(document.CurrentFolder);
    document.all.view.value=document.CurrentFolder;
   }
      else alert("所要删除的不是备份所在的目录，请确认!");  
   }
 function SetNewFolder(Path)    //新建目录
 {
   var NewFolderName; 
   var fso = new ActiveXObject("Scripting.FileSystemObject");
   NewFolderName=window.prompt("请输入新文件夹名称:","");
   try{
    if (LegalInput(NewFolderName) && (NewFolderName))
    {
     var FolderFullPath=Path+"//"+NewFolderName;
    if (fso.FolderExists(FolderFullPath))
   {
     alert("已经存在同名文件夹，请更换文件夹名称！");
   }
     else if (fso.FolderExists(Path))
    {
      fso.CreateFolder(FolderFullPath);
      alert("新文件夹已经创建！");
      ShowFolderList(document.all.view.value);
    }
    else
    {
    if (Path)
      {alert("目标文件夹已被删除，请确认!");
       ShowFolderList(ShowParentFolderName(fso.GetDrive(fso.GetDriveName(path)+"://")));
      }
     else alert("目标文件夹不能为空，请确认!");
     }     
  }
  else if (NewFolderName) alert("输入的文件夹名称不能含有空格，请重新输入！");
 }
 catch (e)
 { alert("输入的文件夹名称含有非法字符，请重新输入！")}
 }
 function GetSourcePath()    //取得要备份的文件路径.
    {
     这里加上自己要备份的文件的地址选取函数    }

function bakFiles(folderpath)    //备份
  {
 SourcePath=GetSourcePath();
 var targetPath="";
 var today=new Date();
 var fso="";
 targetPath=today.getYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日"+today.getHours()+"-"+today.getMinutes()+"-"+today.getSeconds();
 targetPath=folderpath+"//"+"数据备份"+"_"+"("+targetPath+")";   
    fso = new ActiveXObject("Scripting.FileSystemObject");
 try
 {
  if (fso.FolderExists(SourcePath))
    {
   fso.CopyFolder(SourcePath, targetPath);
   SetNewFile(targetPath);
   ShowFolderList(ShowParentFolderName(targetPath));
    }
   else alert("系统安装目录中已无要备份数据存放目录，请找个备份文件夹进行还原!");
 }
 catch(e)
 { alert("没选择目录，请确认!");}
  }
  function RecoverFiles(folderpath)
  {
    var fso = new ActiveXObject("Scripting.FileSystemObject");
 var ConfirmFile=folderpath+"//RP_Bak.confirm";
 if (fso.FileExists(ConfirmFile))
  {
       TargetPath=GetSourcePath();
    try
    {
     if (fso.FolderExists(TargetPath))
   {
     fso.DeleteFolder(TargetPath,true);
   }   
     fso.CreateFolder(TargetPath);
     fso.CopyFolder(folderpath, TargetPath);
     alert("数据已成功还原!");
  }
  catch(e)
  {
     alert("由于数据存放的目录正被使用，现将该目录关闭，请再点击还原选项!");   
  }
   }
  else alert("所选择的还原目录有误，请选择正确的备份文件存放目录!");
  }
  
//-->
</script>
<style type="text/css">
<!--
.style1 {
 font-size: 12px;
 color: #336699;
}
-->
</style>
</head>

<body onLoad="ShowDriveList()">
<table width="560"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="40" >&nbsp;</td>
  </tr>
  <tr>
    <td width="406" id="Drv">&nbsp;</td>
  </tr>
  <tr>
    <td height="5"></td>
  </tr>
  <tr>
    <td id="Folder">&nbsp;</td>
  </tr>
  <tr>
    <td height="5"></td>
  </tr>
  <tr>
    <td id="ShowView"></td>
  </tr>
  <tr>
    <td height="30" valign="bottom" id="tbutton"></td>
  </tr>
</table>
</body>
</html>
　　自行设计好自己要备份的文件夹路径就可以了。

zxub
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
visualization:备份 数据可视化
05-23
数据可视化 数据可视化及备份 数据格式化 function toSimple ( type = 'song' , raw ) { if ( type === 'song' ) { return { album_logo : raw . albumLogo , album_name : raw . albumName , artist_name : raw . artistName , artist_alias : raw . artistAlias , artists : raw . artistVOs && raw . artistVOs . map ( _ => { return {
JavaScript数据可视化编程
07-22
资源名称：JavaScript数据可视化编程内容简介：数据可视化是实现数据价值的重要工具。数据可视化可以将抽象的数字累积转变成为图形、表单等，让普通人可以快速理解数据所代表的情况或趋势。本书是学习如何用...
Javascript常用方法备份
老杨头的博客
11-17 305
Javascript常用方法备份： 1、小驼峰格式转换 2、对象克隆 3、日期格式化 4、字符串长度截取
MySQL——MySQL备份
万里顾一程的博客
10-11 301
数据库——MySQL备份 备份的作用 保证重要的数据不丢失 数据转移 MySQL数据库备份的方式 直接拷贝物理文件 （E:\Enviroment\mysql-5.7.31-winx64\mysql-5.7.31-winx64\data 这个就是存储数据库的文件目录） 在Sqlyog这种可视化工具中手动导出 使用命令行导出 （用mysqldump命令，在命令行使用） #mysqldump用法 #格式：mysqldump -主机 -u用户 -p密码 数据库 表 >要导入
js深拷贝与浅拷贝区别，如何实现深拷贝
weixin_45966674的博客
07-03 247
大家好呀，我是凡玉，小萌新遇到了一个问题，那就是数组生命共同体。 我们需要做的事是声明一个数组并赋值，然后将这个数组的值进行修改并保留他原本的数据 相信大家第一个想法应该大致是这样的 let data1 = [1,2,3,4]; let data2 = data1; data1[3] = 5; 这里我们声明了data1然后将data1的值给了data2，然后对data1的3下标进行了修改，那么这些代码执行完之后我想要的结果是 //data1:[1,2,3,5]; //data2:[1,2,3,4]; 然
基于ECharts的JavaScript数据可视化大屏设计源码
最新发布
04-05
本资源提供了一套基于ECharts的JavaScript数据可视化大屏设计源码，包含45个文件，其中包括13个PNG图片文件，7个JavaScript脚本文件，5个CSS样式文件，5个LESS样式文件，4个JPEG图片文件，4个HTML页面文件，3个JSON...
基于JavaScript的echarts数据可视化大屏设计源码
03-28
echarts数据可视化大屏源码：包含45个文件，使用JavaScript、CSS和HTML技术开发，支持多种数据可视化图表，适用于企业数据展示和分析。
前端 JavaScript echarts 数据可视化学习
06-19
javascrip 中用的比较少 但用起来比较麻烦的echarts 数据可视化的学习笔记 这里是自己参照网络上的学习资料 整理而来的笔记 用来日后自己用到的时候查看
自己写的js备份
yanleigis的专栏
11-13 851
///-------------------下面是用来保存子表单，获得保存的sql by yl 2008.11.12-------------------function delrow1(){    var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;    var question = confirm(
关于撤回键的具体操作，涉及js的数据备份（即深度克隆）
兔老大的胡萝卜
10-26 284
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;jquery-2.1.1.min.js&
可视化网站备份
chpswg的专栏
11-20 191
1、https://github.com/zhongcaiwei/Data-visualization-technology-sharing
常用的JS-备份
SiC B2B2C Shop大型B2B2C商城软件产品，使用Java语言开发，高性能高扩展性高安全性分布式。可帮助你快速的建立大型B2B2C电商系统
03-20 182
我常用 的HTML  类型&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;------------------------------------------------------------...
js函数备份
weixin_30716725的博客
12-12 70
随机数： function randomString(length){ length = length || 32; var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'; var maxPos = chars.length; var string = ''; for (i = 0; ...
js提交数组对象备份
Sunlight
11-03 1159
创建对象//创建数组对象 var poiArray= new Array(); $.each($("input[type='checkbox']:checked"), function(i, n){ if($(n).val()!="on"){ //创建数组对象元素 var temp = new Object(); temp.uid=$(n).v
javascript 常用备份
私人博客
09-10 83
&lt;title&gt;JavaScript小时倒计时代码&lt;/title&gt; &lt;style&gt; body{font-family:"微软雅黑";font-size:22px;} &lt;/style&gt; &lt;SCRIPT LANGUAGE="JavaScript"&gt; &lt;!-- var maxtime = 60*6
JS本地保存数据的几种方法
热门推荐
周自包的博客
06-11 4万+
1.Cookie 这个恐怕是最常见也是用得最多的技术了，也是比较古老的技术了。COOKIE优点很多，使用起来很方便 但它的缺点也很多： 比如跨域访问问题；无法保存太大的数据（最大仅为4KB）；本地保存的数据会发送给服务器，浪费带宽 等等；代码如下 function SetCookie(name, value) { var key = ''; var Da
js中将数据存到硬盘_如何在Windows 7中将数据备份到虚拟硬盘
culiyuan8310的博客
09-23 432
js中将数据存到硬盘Having a solid backup plan is a must if you have important data on your PC that you don’t want to lose. Today we take a look at a unique way of using a virtual hard drive in Windows 7 to bac...
利用js导出数据库的数据，支持主流浏览器
wusuoweijv的专栏
12-30 1551
html 表格导出道                          //第五种方法           var idTmr;           function  getExplorer() {               var explorer = window.navigator.userAgent ;               //ie            
javaScript数据可视化
09-26
JavaScript数据可视化是一种将数据以图形化形式展示的技术。常见的JavaScript数据可视化库包括D3、ECharts、Highcharts和AntV。这些库提供了丰富的图表类型和交互功能，可以帮助开发人员创建各种各样的数据可视化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值