`

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

阅读更多

http://www.blogjava.net/supercrsky/archive/2008/06/17/208641.html

解决方案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 ); // 起始目录为:我的电脑
// varFolder=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" multipleondblclick ="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( " , " color: #000000; background-color:
分享到:
评论

相关推荐

    javascript文件夹选择框的两种解决方案.rar

    在JavaScript中,实现文件夹选择框的功能并非标准API的一部分,因为出于安全和隐私考虑,浏览器通常不允许直接访问用户的文件系统。然而,通过一些技巧和利用HTML5的一些特性,我们可以找到变通的方法来实现类似功能...

    jsp选择文件夹路径

    因此,解决方案主要依赖于前端技术,特别是JavaScript脚本语言以及IE浏览器提供的特定API——`Shell.BrowseForFolder`方法。下面将详细介绍这一方法的使用过程及其在实际项目中的具体实现。 #### 实现步骤 1. **...

    jsp_选择文件夹的路径

    #### 解决方案详解 ##### 1. 调用Windows Shell API 为了实现文件夹的选择,我们可以利用JavaScript中的ActiveX技术调用Windows Shell API。这种方法可以通过`Shell.BrowseForFolder()`函数来弹出一个文件夹选择...

    javascript读取文件夹中的文件并输出

    但是,借助HTML5引入的一些API,如FileReader API和File System API(已废弃),以及现代浏览器支持的Web Workers和Service Workers,我们可以找到一些解决方案。 1. **FileReader API** FileReader API允许我们在...

    一种基于VueJS的平台前端框架解决方案.docx

    在“一种基于VueJS的平台前端框架解决方案”中,主要探讨了如何利用VueJS构建一个高效、可扩展且适合多人协同开发的前端框架。 首先,界面设计是任何前端框架的核心部分。VueJS提供了丰富的指令和组件系统,使得...

    火山PC自定义画板选择框例子

    文件列表中的"画板选择框.vsln"是Visual Studio解决方案文件,包含了项目的配置信息和所有相关的项目文件。"画板选择框"可能是源代码文件夹,包含具体的JavaScript或TypeScript代码,以及可能的HTML和CSS文件。"tb...

    jQuery世界国家下拉选择框代码.zip

    总结来说,这个压缩包提供了一套完整的解决方案,用于在网页上创建一个具有国旗图标的可搜索世界国家下拉选择框。开发者可以通过这个组件轻松地集成到自己的网站中,提升用户在选择国家时的体验。

    web中选择文件夹的OCX

    总的来说,"web中选择文件夹的OCX"为Web应用提供了一种在旧版浏览器环境下选择本地文件夹的解决方案。然而,随着技术的迭代,开发者应当关注更现代、更安全的替代方法,以适应不断变化的Web环境。在实际项目中,需要...

    jQuery万能浮动框插件

    其核心特性在于提供了一种灵活且易于使用的解决方案,使得开发者无需深入CSS和JavaScript的细节就能实现动态浮动效果。 首先,让我们来了解一下jQuery。jQuery是一个高效、简洁且功能丰富的JavaScript库,它简化了...

    JavaScript +css3移动框架案例.zip

    无论是想提升自己的前端技能,还是寻找现成的解决方案,这个资源都能提供宝贵的学习材料和灵感来源。通过深入研究和实践这些案例,开发者可以更好地掌握这两种技术,并应用于实际的移动项目中。

    jQuery文件夹创建展开收缩代码.zip

    总的来说,"jQuery文件夹创建展开收缩代码.zip" 提供了一套完整的解决方案,利用jQuery和Bootstrap的强大功能,实现了一种直观且响应式的文件夹操作效果,对于开发人员来说,它是一个快速构建此类功能的良好起点。...

    前端UI解决方案 Bootswatch.zip

    Bootswatch是一款专门为Bootstrap框架设计的前端UI解决方案,它提供了多样的主题和样式,使得开发者可以轻松地定制和改变Bootstrap的默认外观,从而打造出独具特色的网站界面。在本压缩包"Bootswatch.zip"中,包含的...

    .net中ajax学习解决方案

    7. **jQuery与AJAX**:虽然.NET提供了一套完整的AJAX解决方案,但很多开发者依然选择使用jQuery库来处理AJAX请求,因为它的API简洁且兼容性好。jQuery的$.ajax()、$.get()、$.post()等函数使异步请求变得非常简单。 ...

    javascript ArtDialog

    总的来说,ArtDialog是一个强大而实用的对话框解决方案,尤其适合那些重视性能和用户体验的Web开发者。它的轻量级特性、丰富的样式选择以及对浏览器兼容性的关注,使其在JavaScript弹窗组件中脱颖而出。通过合理利用...

    JS树形菜单文件夹美化样式代码.zip

    总的来说,这个代码库提供了一套完整的解决方案,用于创建美观且交互性强的JS树形菜单。对于想要在网页上实现类似功能的开发者来说,这是一个很好的学习和参考资源。通过研究和理解这些代码,不仅可以学会如何构建树...

    jQuery左右文字双向列表选择器插件

    总之,"jQuery左右文字双向列表选择器插件"是一个强大且灵活的工具,它结合了搜索、多选、排序等多种功能,为Web开发者提供了构建高效双向选择界面的解决方案。无论是在小型项目还是大型应用中,都能发挥出其独特的...

    Cabloyjs基于EggBornJS的JavaScript全栈业务开发平台

    CabloyJS是建立在EggBornJS基础上的JavaScript全栈开发平台,旨在提供高效、稳定的业务开发解决方案。这个平台融合了前端与后端的技术,使得开发者可以无缝地进行全栈式开发,提高开发效率,降低维护成本。 **...

    asp.net中拍大头帖解决方案 (源码)

    标题 "asp.net中拍大头帖解决方案 (源码)" 提供了我们即将探讨的核心技术:ASP.NET,以及一个特定的应用场景,即实现大头贴拍摄功能。这通常涉及到图像处理、用户交互以及Web应用程序的设计。 描述 "为.rar,下载...

    jquery javascript .Net 图片截图

    这个项目“jquery javascript .Net 图片截图”就是一种实现此类功能的解决方案。它结合了JavaScript库jQuery、JavaScript编程以及后端的.Net技术,来实现用户在浏览器中选择图片的一部分,并将其截图保存。 首先,...

Global site tag (gtag.js) - Google Analytics