`
deer
  • 浏览: 86431 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

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

JavaScriptJ#F#脚本Windows 
阅读更多
解决方案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>

分享到：
| JSON介绍
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    这里我们将探讨两种常见的解决方案。 **解决方案一：使用HTML5的`input[type="file"]`配合`webkitdirectory`属性** HTML5引入了`&lt;input type="file"&gt;`元素，允许用户选择文件。虽然默认情况下，用户只能选择单个...

    JavaScript +css3移动框架案例.zip

    这个名为 "JavaScript +css3移动框架案例.zip" 的压缩包文件包含了一些利用这两种技术实现的实用特效代码，适用于移动平台。 首先，让我们详细了解一下JavaScript。JavaScript是一种轻量级的解释型编程语言，主要...

    javascript树形控件

    总的来说，这个JavaScript树形控件项目提供了一个可定制、交互性强的解决方案，可以方便地集成到任何需要树形结构展示的网页应用中。开发者通过熟练运用JavaScript和理解用户交互需求，成功实现了动态操作、键盘事件...

    双边栏 js组件

    总的来说，这个“双边栏 js组件”提供了一个便捷的解决方案，帮助开发者快速创建具有专业外观和交互功能的两栏布局，减少了他们在布局和样式上的工作量，从而专注于应用程序的核心功能开发。在实际的前端项目中，...

    php html js 后台框架

    1. left.jpg 和 left.png：这是两种不同格式的图片文件，可能用于后台管理界面的布局设计，如侧边栏的背景。开发者可能需要根据框架文档指示将它们应用到对应的CSS样式中。 2. admin：这个文件可能是后台管理系统的...

    javascript写文件

    因此，在实际项目中，若需实现跨平台的文件操作功能，建议使用服务器端技术（如Node.js配合fs模块）或者前端框架提供的解决方案（如Electron应用）。 #### 总结 虽然直接使用JavaScript在客户端进行文件写入存在...

    curvycorner——纯javascript的圆角边框设计

    总的来说，CurvyCorners作为一个纯JavaScript实现的圆角边框解决方案，为那些需要在老版本IE中实现圆角效果的开发者提供了一种实用且灵活的选择。虽然随着浏览器的更新迭代，CSS3的border-radius已经得到了广泛支持...

    QC在Win7的IE8和IE9下不能工作的解决方案

    2. **关闭UAC的两种方法**： - 方法1：开始 → 控制面板 → 查看方式：大图标 → 操作中心 → 更改用户账户控制设置 → 把滑块移到最下面。 - 方法2：开始菜单 → 点击“账户名称头像图标” → 更改用户账户控制...

    Czou.TimePicker 时间选择控件 v2012.02.02

    总的来说，Czou.TimePicker时间选择控件以其简洁的设计、智能化的定位和灵活的定制性，为网页开发提供了一种高效的时间输入解决方案。开发者只需掌握基本的jQuery知识，就可以轻松地将其集成到网页中，提升用户在...

    Bootstrap 4多选下拉框BsMultiSelect插件

    总之，Bootstrap 4的BsMultiSelect插件是一个功能强大的多选下拉框解决方案，它结合了jQuery的便利性和Bootstrap的美观性，为开发者提供了丰富的交互体验和高度的可定制性。无论是小型项目还是大型应用，它都能成为...

    asp.net 省市县联动选择[ajax]demo

    这个"asp.net 省市县联动选择[ajax]demo"提供了一个具体的解决方案，利用AJAX、JavaScript（JS）、jQuery技术来实现动态加载和联动效果，大大提升了用户体验。以下是关于这个demo涉及的知识点的详细解析： 1. **ASP...

    为Meteor的集合和反应性设计的客户端服务器自动完成。_CoffeeScript_JavaScript_下载.zip

    "为Meteor的集合和反应性设计的客户端服务器自动完成" 是一个专为此目的而设计的解决方案，它结合了 CoffeeScript 和 JavaScript 的优势，以实现高效且响应迅速的用户体验。 Meteor 是一个全栈JavaScript框架，它...

    完善的文本编辑框可以上传图片

    在描述中提到了"ckeditor"和"ckfinder"，这两个是常见的开源工具，它们协同工作，为用户提供了一个强大的文件编辑解决方案。 CKEditor是一款广泛使用的JavaScript富文本编辑器，支持多种浏览器环境，如Chrome、Fire...

    插件需要的js和css脚本

    在网页开发中，JavaScript（js）...在插件开发中，理解并熟练掌握这两者，能够帮助你创建出高效、优雅的解决方案。无论是自用还是分享，对这两种脚本语言的深入理解和灵活运用，都将极大地提升你的开发效率和用户体验。

    css3可定时关闭的消息提示框插件

    总的来说，这个CSS3消息提示框插件充分利用了CSS3的新特性，为开发者提供了一种高效、美观的解决方案，同时保持了轻量级的代码结构，易于集成到各种网页项目中。无论是新手还是经验丰富的开发者，都能从中受益，提升...

    jQuery Selectric下拉框菜单选择插件.zip

    jQuery Selectric就是这样一个插件，专注于改善下拉选择框的外观和交互。 **jQuery实例**是实际项目中使用jQuery代码的例子。在本压缩包中，`index.html`和`ajax.html`很可能是两个展示jQuery Selectric插件实际...

    js tree构建菜单树

    这里可能使用了递归方法来生成树的各个层级，或者使用了像jQuery UI的`treeview`插件这样的现成解决方案。这些插件简化了创建和管理树形结构的过程。 在Web开发中，JavaScript通常与后端语言如Java的jsp（Java...

    QMUI iOS——致力于提高项目 UI 开发效率的解决方案.zip

    QMUI iOS 遵循Apple的Human Interface Guidelines，并且兼容Swift和Objective-C两种语言，使其成为iOS开发者的强大助手。 QMUI_iOS-master 文件夹很可能是QMUI iOS 项目的源码仓库，其中包含了项目的源代码、示例...

    基于node后台HTML5异步上传+FLASH异步上传四种方法.zip

    文件夹可能包括了服务器端代码（如app.js）、前端HTML页面、JavaScript脚本（可能包括HTML5和Flash两种上传的实现）、以及可能的配置文件和示例文件。开发者可以参考这些代码，学习如何在自己的项目中实现类似的功能...

Magicbox
Global site tag (gtag.js) - Google Analytics