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 相关文章推荐
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
js断点调试经验分享
Dec 08 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
JavaScript函数重载操作实例浅析
May 02 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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 Rename 更改文件、文件夹名称
2011/05/24 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
处理单名多值表单的详解
2013/06/08 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Django缓存系统实现过程解析
2019/08/02 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
C# Debug和Testing相关面试题
2015/10/25 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
课例研修方案
2014/05/31 职场文书
公司开业主持词
2015/07/02 职场文书
升学宴家长致辞
2015/07/27 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
分享Python获取本机IP地址的几种方法
2022/03/17 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android