`
5211422
  • 浏览: 212778 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 文件夹选择框（二）

J#F#HTML 
阅读更多

自己写一个js读取本地硬盘的选择框, 缺点是外观上较上一个差一些

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.zzst.application.meeting.util.*"%>

<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>

 

分享到：
| js 文件夹选择框（一）
评论
发表评论

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

相关推荐

    js 文件夹选择框（三）

    这篇文章“js 文件夹选择框（三）”可能探讨了如何在JavaScript环境下实现类似功能的方法。 首先，我们需要了解，通常在Web应用中，`&lt;input type="file"&gt;`元素只能让用户选择单个文件或一组文件，但不能选择整个...

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

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

    【转】js实现弹出选择路径框

    标题中的“【转】js实现弹出选择路径框”指的是使用JavaScript编程语言来创建一个功能，让用户能够通过图形用户界面（GUI）选择本地文件系统的特定路径。在网页应用中，通常浏览器的安全策略不允许直接访问用户的...

    jsp选择文件夹路径

    在`browseFolder.js`文件中定义一个名为`browseFolder`的函数，该函数用于打开文件夹选择对话框，并返回所选文件夹的路径。 ```javascript function browseFolder(path) { try { var message = "请选择文件夹...

    jquery时间选择框

    总结，创建一个支持时、分、秒选择的jQuery时间选择框，需要结合jQuery库、时间选择插件、HTML结构以及JavaScript事件处理。通过合理的配置和编程，我们可以实现一个功能强大、用户体验良好的时间选择组件。在实际...

    带选择框树

    3. **层级视图**：在文件管理器或目录浏览中，带选择框树能清晰地展示文件或文件夹的层级关系，方便用户同时选择多级目录。 4. **配置设置**：在软件或应用的设置界面，用户可以使用带选择框树来选择启用或禁用某些...

    javascript 选择文件夹对话框(web)

    只要获取控件对象，然后调用getFiles()方法就可以获取对应路径下的所有文件，如下图： 该控件可以选择任意盘符下的任意文件夹，图中最下面的按钮时web中的input，通过web中的js方法来获取文件列表,OCX 的getFiles()...

    jsp_选择文件夹的路径

    本文将详细介绍一种通过JavaScript调用Windows Shell API来实现文件夹选择的方法，并在JSP页面上展示所选文件夹的路径。 #### 解决方案详解 ##### 1. 调用Windows Shell API 为了实现文件夹的选择，我们可以利用...

    vue消息弹出框组件需要的文件

    1，弹出框显示包括info, warning, success, error, normal五种预定义样式，也可自定义； 2，支持自动关闭和点击关闭，放了关闭监听函数和点击消息框监听函数，放在增加后续行为； 3，放了获取消息和更新消息状态的...

    浏览文件夹的js代码

    ### 浏览文件夹的JS代码解析与应用 在网页开发中，实现用户与本地文件系统的交互是一项重要的功能。本文将深入分析一个用于浏览器（包括IE和Firefox）中浏览文件夹的JavaScript代码，并探讨其工作原理及实际应用...

    完整版目标目录选择框模块使用例子.e.rar

    "完整版目标目录选择框模块使用例子.e.rar"是一个压缩包文件，它包含了一个关于如何使用目标目录选择框模块的详细实例。这个模块通常是用于让用户在应用程序中方便地选择存储路径或文件夹的地方，常见于文件上传、...

    JS读取本地文件夹和图片异步加载（图片LazyLoad）

    在本文中，我们将探讨如何使用JavaScript读取本地文件夹，并实现图片的异步加载，即图片的LazyLoad技术。 一、JavaScript读取本地文件夹 在浏览器环境中，出于安全考虑，JavaScript无法直接访问用户的本地文件系统...

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

    综上所述，虽然JavaScript在浏览器环境中直接读取文件夹的能力受到限制，但通过上述技术的组合，可以实现类似的功能，尤其是当用户主动参与文件选择过程时。在开发Web应用时，应始终考虑安全性和用户体验，确保操作...

    javascript实现的日期选择器

    `JS` 文件夹很可能是存放JavaScript源代码的地方，其中可能包括了日期选择器的核心逻辑，如日期计算、事件处理、DOM操作等。JavaScript代码通常会使用DOM（文档对象模型）来操作HTML元素，实现与用户的交互。 `...

    完整版目标目录选择框模块使用例子.rar

    1. **目标目录选择框模块**：这是UI设计中的一种常见元素，通常以输入框的形式存在，允许用户输入或者通过下拉菜单选择一个文件夹路径。在编程中，这个模块可能由特定的控件或者库来实现，如HTML5的`...

    jquery时尚下拉选择框.zip

    在这个项目中，可能会有一个名为`dropdown.js`或类似的文件，里面包含了实现下拉选择框动态效果的jQuery代码。这些代码可能包括监听事件、改变样式、添加动画等。 3. **css**：同样是一个文件夹，用于存储CSS样式...

    css实现个性化select 下拉选择框(3种风格)

    `css`文件包含了上述的各种CSS样式规则，`images`文件夹可能存储了用于箭头图标的图片资源，而`js`文件可能包含了额外的JavaScript代码，用于处理交互逻辑或进一步自定义下拉框的行为。 总结，通过CSS，我们可以...

    完整版目标目录选择框模块代码.e.rar

    首先，目标目录选择框通常用于让用户在应用程序中选择一个或多个文件夹，这在文件上传、备份、文件管理等场景中十分常见。它需要提供一种直观且高效的用户界面，以便用户能轻松地浏览和选择所需的目录。 1. **前端...

    js/jq仿window文件夹框选操作插件

    4. 当鼠标释放(`mouseup`)时，根据选择框的位置和大小，找到所有落入该区域的`li`元素，并将它们的`selected`类添加回去，表示这些元素被选中。 这个插件的实现方式简洁而高效，它利用了jQuery的事件处理和DOM操作...

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