JS+ACTIVEX实现网页选择本地目录路径对话框


Posted in Javascript onMarch 18, 2013

网页选择本地目录路径对话框,使用ACTIVEX对象遍历本地磁盘和目录,只需网页启用相关ACTIVEX的INTERNET选项,对本地浏览器的安全性要求不高,简单易用。

网页选择本地目录路径对话框样例

1.打开主页面"select.html",点击“选择路径”按钮进入路径选择页面“dir.html”,选取本地目录路径

JS+ACTIVEX实现网页选择本地目录路径对话框

2.路径选择页面“dir.html”初始化后,加载本地磁盘驱动,然后根据选择的磁盘路径加载其中的目录。如目录中存在子目录,双击该目录列表项进入下一集目录。

JS+ACTIVEX实现网页选择本地目录路径对话框

3.点击“确定”,关闭选择路径页面"dir.html",将选择的路径值返回到主页面"select.html"文本框上

JS+ACTIVEX实现网页选择本地目录路径对话框

/**//* 
*初始化,将系统所有的驱动器放入table_drives列表 
*/ 
window.onload = new function init() 
{ 
var fso, s, n, e, x; 
fso = new ActiveXObject("Scripting.FileSystemObject"); 
e = new Enumerator(fso.Drives); 
s = ""; 
for (; !e.atEnd(); e.moveNext()) 
{ 
x = e.item(); 
s = s + x.DriveLetter; 
s += ":"; 
if (x.DriveType == 3) 
n = x.ShareName; 
else if (x.IsReady) 
n = x.VolumeName; 
else 
n = "[驱动器未就绪]"; 
s += n + ","; 
} 
var drives = s.split(","); 
var tableDrives = document.getElementById("tables_drives"); 
for ( var i = 0; i < drives.length-1; i++ ) 
{ 
var option = document.createElement("OPTION"); 
drives[i].split(":"); 
option.value = "["+drives[i].split(":")[0]+":]"+drives[i].split(":")[1]; 
option.text = "["+drives[i].split(":")[0]+":]"+drives[i].split(":")[1]; 
tableDrives.add(option); 
} 
get_drives(); 
} /**//* 
*tables_drives列表中选中的驱动器上所有文件夹放入table_folder列表中 
*/ 
function get_drives() 
{ 
var tableDrives = document.getElementById("tables_drives"); 
var tableFolders = document.getElementById("table_folder"); 
for ( var i = 0; i < tableDrives.options.length; i++ ) 
{ 
if ( tableDrives.options[i].selected == true ) 
{ 
var fso, f, fc, s; 
var drive = tableDrives.options[i].value.split(":")[0].substring(1,tableDrives.options[i].value.split(":")[0].length); 
document.getElementById("backDir").value = drive + ":\\"; 
fso = new ActiveXObject("Scripting.FileSystemObject"); 
if (fso.DriveExists(drive)) 
{ 
d = fso.GetDrive(drive); 
if ( d.IsReady ) 
{ 
f = fso.GetFolder(d.RootFolder); 
fc = new Enumerator(f.SubFolders); 
s = ""; 
for (;!fc.atEnd(); fc.moveNext()) 
{ 
s += fc.item(); 
s += ","; 
} 
var len = tableFolders.options.length; 
while(len >= 0) 
{ 
tableFolders.options.remove(len); 
len--; 
} 
var option = document.createElement("OPTION"); 
option.value = drive + ":\\"; 
option.text = drive + ":\\"; 
tableFolders.add(option); 
var folders = s.split(","); 
for ( j = 0; j < folders.length -1; j++) 
{ 
option = document.createElement("OPTION"); 
option.value = folders[j]; 
option.text = folders[j]; 
tableFolders.add(option); 
} 
} 
else 
{ 
alert("无法改变当前内容!") 
} 
} 
else 
return false; 
} 
} 
} 
function get_fileName() 
{ 
var tableFolders = document.getElementById("table_folder"); 
for ( var i = 0; i < tableFolders.options.length; i++ ) 
{ 
if ( tableFolders.options[i].selected == true ) 
{ 
var folderpath = tableFolders.options[i].value.substring(0,tableFolders.options[i].value.length); 
if ( folderpath.charAt(folderpath.length-1) == "\\" ) 
{ 
document.getElementById("backDir").value = folderpath; 
} 
else 
{ 
document.getElementById("backDir").value = folderpath + "\\"; 
} 
} 
} 
} 
/**//* 
*table_folder双击选项中的一个选项,就将该文件夹下面的文件夹显示在table_folder列表中。 
*/ 
function get_file() 
{ 
var tableFolders = document.getElementById("table_folder"); 
var tableDrives = document.getElementById("tables_drives"); 
for ( var i = 0; i < tableFolders.options.length; i++ ) 
{ 
if ( tableFolders.options[i].selected == true ) 
{ 
var fso, f, fc, s; 
var folderpath = tableFolders.options[i].value.substring(0,tableFolders.options[i].value.length); 
if ( folderpath.charAt(folderpath.length-1) == "\\" ) 
{ 
document.getElementById("backDir").value = folderpath; 
} 
else 
{ 
document.getElementById("backDir").value = folderpath + "\\"; 
} 

fso = new ActiveXObject("Scripting.FileSystemObject"); 
f = fso.GetFolder(folderpath); 
fc = new Enumerator(f.SubFolders); 
s = ""; 
for (;!fc.atEnd(); fc.moveNext()) 
{ 
s += fc.item(); 
s += ","; 
} 
var len = tableFolders.options.length; 
while(len >= 0) 
{ 
tableFolders.options.remove(len); 
len--; 
} 
var opt = ""; 
var opt1 = ""; 
for ( j = 0; j < folderpath.split("\\").length; j++ ) 
{ 
var option = document.createElement("OPTION"); 
opt = opt + folderpath.split("\\")[j]+"\\"; 
if ( j > 0) 
{ 
opt1 = opt; 
option.value = opt1.substring(0,opt1.length-1); 
option.text = opt1.substring(0,opt1.length-1); 
tableFolders.add(option); 
} 
else 
{ 
option.value = opt; 
option.text = opt; 
tableFolders.add(option); 
} 
} 
if ( tableFolders.options[0].value == tableFolders.options[1].value ) 
{ 
tableFolders.options.remove(1); 
} 
if ( s != "" ) 
{ 
var folders = s.split(","); 
for ( j = 0; j < folders.length -1; j++) 
{ 
option = document.createElement("OPTION"); 
option.value = folders[j]; 
option.text = folders[j]; 
tableFolders.add(option); 
} 
} 
} 
} 
}
Javascript 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
JavaScript更改class和id的方法
Oct 10 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 #Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 #Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 #Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 #Javascript
js前台分页显示后端JAVA数据响应
Mar 18 #Javascript
侧栏跟随滚动的简单实现代码
Mar 18 #Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 #Javascript
You might like
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP递归的三种常用方式
2019/02/28 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
JavaScript File分段上传
2016/03/10 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python的依赖管理的实现
2019/05/14 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python画微信表情符的实例代码
2019/10/09 Python
python生成特定分布数的实例
2019/12/05 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Python如何实现定时器功能
2020/05/28 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
施工员岗位职责
2014/03/16 职场文书
生日寄语大全
2014/04/08 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
未中标通知书
2015/04/17 职场文书
检讨书怎么写?
2019/06/21 职场文书
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
MySQL 原理与优化之Update 优化
2022/08/14 MySQL