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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
枚举JavaScript对象的函数
Dec 22 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
详解Layer弹出层样式
Aug 21 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
python直接访问私有属性的简单方法
2016/07/25 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python 实现屏幕录制示例
2019/12/23 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
pytorch 修改预训练model实例
2020/01/18 Python
python中if及if-else如何使用
2020/06/02 Python
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
教育科学研究生自荐信
2013/10/09 职场文书
高中班主任评语大全
2014/04/25 职场文书
爱国口号
2014/06/19 职场文书
会议室标语
2014/06/21 职场文书
房产授权委托书范本
2014/09/22 职场文书
2015元旦节寄语
2014/12/08 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
Ruby处理YAML和json数据
2022/04/18 Ruby
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技
Django框架中模型的用法
2022/06/10 Python