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构造器的实现代码小结
May 16 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
python 写一个性能测试工具(一)
2020/10/24 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
《石榴》教学反思
2014/03/02 职场文书
微笑服务标语
2014/06/24 职场文书
贷款承诺书
2015/01/20 职场文书
介绍信模板
2015/01/31 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书