利用ActiveX实现本地文件夹选择功能(JS,HTML)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
 <div id='tree'></div>
 <script language="JavaScript">
 <!--

var FolderTree = function() {
 var ft = this;
 // 文件夹图标,分别在树展开和关闭时显示
 this.driveImage = new Array("+","-");
 // 要呈现树的容器ID
 this.containerId = '';
 // 初始化是否ok
 this.show = true;
 this.init = function(treeIcon,containerId) {
  if (treeIcon!= null && ! typeof(treeIcon) == Array) {
   alert("文件夹树形图标是一个数组,包含树展开和关闭,请确认!");
   this.show = false;
  }
  if (treeIcon != null) {
   this.driveImage = treeIcon;
  }
  if (containerId != null) {
   this.containerId = containerId;
  }
  this.makeFolderTree();
 },
 // 在指定的容器展现树
 this.makeFolderTree = function() {
  if (this.show) {
   var fso, s, n, e, x;
   var ul = "<ul id='drivelist'>";
   fso = new ActiveXObject("Scripting.FileSystemObject");
   e = new Enumerator(fso.Drives);
   
   for (; !e.atEnd(); e.moveNext())
   {
    ul += "<li style='list-style:none;'><span  οnclick='ft.liMouseClick(this);'>"+this.driveImage[0]+"</span><span>"+e.item()+"</span><input type=checkbox name='dir' value='"+e.item()+"' οnclick='ft.checkConfirmOneSelected();'></li>";
   }
   
   ul += "</ul>";
   if (this.containerId == '') {
    document.body.innerHTML = ul;
   }
   else {
    document.getElementById(this.containerId).innerHTML = ul;      
   }
  }
 },
 // 单击节点时,获取子目录并展现
 this.liMouseClick = function(o) {
  o = o.parentElement;
  var s1 = o.childNodes[0].innerHTML.toLowerCase() ;
  s1 = s1.substring(s1.lastIndexOf('/')+1,s1.length-2);
  var s2 = this.driveImage[0];
  s2 = s2.substring(s2.lastIndexOf('/')+1,s2.length-2);

  if (s1 == s2)
  {
   // 单击+号时,先判断是否已经单击过,未单击过才列出它的子目录。 
   if (o.childNodes.length <= 3) //1个span(+,-),1个span(目录),1个checkbox
   {
    // 获取子目录和文件
    // 根目录
    var rootFolder = o.childNodes[1].innerText + "\\";
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var folder = fso.GetFolder(rootFolder);
    

    var ul = "<ul>";
    // 列出子目录
    fc = new Enumerator(folder.SubFolders);
    for (; !fc.atEnd(); fc.moveNext())
    {
     var li = "<li style='list-style:none;'><span  οnclick='ft.liMouseClick(this);'>"+this.driveImage[0]+"</span><span>"+fc.item()+"</span><input type=checkbox name='dir' value='"+fc.item()+"' οnclick='ft.checkConfirmOneSelected();'></li>";
     ul += li;
    }

    //fc = new Enumerator(folder.files);
    // 列出目录下的文件
     // for (; !fc.atEnd(); fc.moveNext())
   //   {
   //  var li = "<li  style='list-style:none;' οnclick='liMouseClick(this);'><span>"+driveImage[0]+"</span><span>"+fc.item()+"</span></li>";
   //  ul += li;
   //   }

      ul += "</ul>";
    o.innerHTML = o.innerHTML + ul;
   }
   
   o.childNodes[0].innerHTML = this.driveImage[1];
   
  }
  else {
   for (var i=3;i<o.childNodes.length ;i++ )
   {
    o.removeChild(o.childNodes[i]);
   }
   o.childNodes[0].innerHTML  =   this.driveImage[0];
  }
 },
 // 保证只能选择一个目录
 this.checkConfirmOneSelected = function() {
  var checkboxs = document.getElementsByTagName('input');
  var index = 0;

  for (var i=0;i<checkboxs.length ;i++ )
  {
   if (checkboxs[i].type == 'checkbox')
   {
    if (checkboxs[i].checked)
    {
     index++;
    }  
   }
  }

  if (index > 1)
  {
   alert('请选择一个文件夹!');
   return;
  }
 },
 // 返回选择的目录
 this.showSelectedFolder = function() {
  this.checkConfirmOneSelected();
  var checkboxs = document.getElementsByTagName('input');
  var selectedFolderString = '';

  for (var i=0;i<checkboxs.length ;i++ )
  {
   if (checkboxs[i].type == 'checkbox')
   {
    if (checkboxs[i].checked)
    {
     selectedFolderString = checkboxs[i].parentElement.childNodes[1].innerText;
     break;
    }  
   }
  }
  
  /*if (selectedFolderString != '')
  {
   alert('选择的文件夹是:' + selectedFolderString);
  }
  else {
   alert('未选择文件夹');
  }*/

  return(selectedFolderString);
 }
}

//  var ft = new FolderTree(10,10);
 // ft.alert();

 var ft = new FolderTree();
 ft.init(new Array("<img src='D:/qincidong/books/ext/ext-2.3.0/ext-2.3.0/resources/images/default/tree/folder.gif'>","<img src='D:/qincidong/books/ext/ext-2.3.0/ext-2.3.0/resources/images/default/tree/folder-open.gif'>"),'tree');
 //-->
 </script>
</body>
</html>


 


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值