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 Div中加载其他页面的实现代码
Feb 27 Javascript
Javascript中For In语句用法实例
May 14 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
Vant 中的Toast设置全局的延迟时间操作
Nov 04 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文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
用JS实现选项卡
2020/03/23 Javascript
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python ftplib模块使用代码实例
2019/12/31 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
建筑专业自我鉴定
2013/10/22 职场文书
调解员先进事迹材料
2014/02/07 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
买房子个人收入证明
2014/10/12 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
医院科室评语
2015/01/04 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers