Javascript 文件夹选择框的两种解决方案


Posted in Javascript onJuly 01, 2009

解决方案1:
调用windows 的shell,但会有安全问题.

* browseFolder.js
* 该文件定义了BrowseFolder()函数,它将提供一个文件夹选择对话框
* 以供用户实现对系统文件夹选择的功能
* 文件夹选择对话框起始目录由
* Shell.BrowseForFolder(WINDOW_HANDLE, Message, OPTIONS, strPath)函数
* 的strPath参数设置
* 例如:0x11--我的电脑
* 0 --桌面
* "c:\\"--系统C盘
*
* 用如下代码把该函数应用到一个HTML文件中:
* <script src="browseFolder.js"></script>
* 或把下面代码直接COPY到<script language="javascript">...</script>标签中;

* 特别注意的是,由于安全方面的问题,你还需要如下设置才能使本JS代码正确运行,
* 否者会出现"没有权限"的问题.
*
* 1、设置可信任站点(例如本地的可以为:http://localhost)
* 2、其次:可信任站点安全级别自定义设置中:设置下面的选项
* "对没有标记为安全的ActiveX控件进行初始化和脚本运行"----"启用"

browserFolder.js:

/**//*** 
path 要显示值的对象id 
****/ 
function browseFolder(path) { 
try { 
var Message = "\u8bf7\u9009\u62e9\u6587\u4ef6\u5939"; //选择框提示信息 
var Shell = new ActiveXObject("Shell.Application"); 
var Folder = Shell.BrowseForFolder(0, Message, 64, 17);//起始目录为:我的电脑 
//var Folder = Shell.BrowseForFolder(0,Message,0); //起始目录为:桌面 
if (Folder != null) { 
Folder = Folder.items(); // 返回 FolderItems 对象 
Folder = Folder.item(); // 返回 Folderitem 对象 
Folder = Folder.Path; // 返回路径 
if (Folder.charAt(Folder.length - 1) != "\\") { 
Folder = Folder + "\\"; 
} 
document.getElementById(path).value = Folder; 
return Folder; 
} 
} 
catch (e) { 
alert(e.message); 
} 
}

使用的时候:
<td> 
<input type="text" name="path" /> 
</td> 
<td> 
<input type="button" onclick="browseFolder('path')" 
value="选择生成路径" /> 
</td>

2.解决方案二:
自己写一个js读取本地硬盘的选择框, 缺点是外观上较上一个差一些. <html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>无标题文档</title> 
</head> 
<body> 
<table border="0" cellpadding="0" width="100%" id="tb_show"> 
<tr> 
<td width="18%">文件保存位置:</td> 
<td width="82%"> 
<%--<html:file property="file" size="40" styleClass="inputbox"/>--%> 
<input name="backDir" type="text" value ="C:\" size="100" width="500"> 
</td> 
</tr> <tr> 
<td>目录位置:</td> 
<td> 
<select name="tables_drive" id="tables_drives" onchange="get_drives()" ></select> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<select name="table_folder" id="table_folder" size="10" multiple ondblclick="get_file()"></select> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<font color="red">说明:双击列表框的一个选项,就将该文件夹下面的文件夹显示在该列表框中。第一个就是根目录</font> 
</td> 
</tr> 
</table> 
</body> 
</html> 
<script> 
/**//* 
*初始化,将系统所有的驱动器放入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); 
} 
} 
/**//* 
*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; 
} 
} 
} 
/**//* 
*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); 
} 
} 
} 
} 
} 
</script>

如果您还有好的解决方案,回帖分享一下吧.
Javascript 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
javascript拖拽应用实例
Mar 25 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 #Javascript
JavaScript XML操作 封装类
Jul 01 #Javascript
js 跨域和ajax 跨域问题小结
Jul 01 #Javascript
javawscript 三级菜单的实现原理
Jul 01 #Javascript
Javascript 函数对象的多重身份
Jun 28 #Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 #Javascript
event对象的方法 兼容多浏览器
Jun 27 #Javascript
You might like
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
详解Python中find()方法的使用
2015/05/18 Python
python实现简单日期工具类
2019/04/24 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
大学生物业管理求职信
2013/10/24 职场文书
2014年计生标语
2014/06/23 职场文书
环卫工作汇报材料
2014/10/28 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL