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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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
php at(@)符号的用法简介
2009/07/11 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
python使用生成器实现可迭代对象
2018/03/20 Python
Python爬取成语接龙类网站
2018/10/19 Python
python 模拟登录B站的示例代码
2020/12/15 Python
pytorch中index_select()的用法详解
2021/01/06 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
企划主管岗位职责
2013/12/12 职场文书
关于学习的决心书
2015/02/05 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
民事代理词范文
2015/05/25 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
python 下划线的多种应用场景总结
2021/05/12 Python
Python面试不修改数组找出重复的数字
2022/05/20 Python