zoukankan      html  css  js  c++  java

  • Asp.net点击按钮弹出文件夹选择框的实现（网页）

    本文地址：http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html

    在Asp.net网站实际的开发中，比如：需要实现点击一个类似于FileUpload的浏览...按钮，弹出文件夹选择框，然后选择本地路径下的 某一文件夹，将该路径值付给TextBox。参考了好多网络资料，但是其主要实现方式是通过FileUpload，但是这种文件上传方式去不能很好的解决 该功能需求；只好寻求别的解决方法。在不断深入的学习中，发现可以通过JS的方式来得以实现该需求。下面是详细的实现过程，供大家参考。

    解决方法1:
    调用windows 的shell，但会有安全问题。
    该文件定义了BrowseFolder()函数，它将提供一个文件夹选择对话框
    以供用户实现对系统文件夹选择的功能，文件夹选择对话框起始目录由
    Shell.BrowseForFolder(WINDOW_HANDLE, Message, OPTIONS, strPath)函数的strPath参数设置
    例如：0x11--我的电脑；0 ——桌面."c:\"--系统C盘。
    你可以创建一个browseFolder.js，然后进行调用,
    用如下代码把该函数应用到一个HTML文件中：
     <script src="browseFolder.js"></script>

    或者把下面代码直接复制到<script type="text/javascript">...</script>中得...处；

    注：由于浏览器安全方面的问题,你还需要作如下设置才能使本JS代码正确运行,否者会出现“没有权限”的问题。
     1、设置可信任站点（例如本地的可以为：http://localhost）

     2、可信任站点安全级别自定义设置中：选择“Internet选项下——安全选项卡”，点击“自定义级别”按钮设置下面的选项 “对未标记为安全的ActiveX控件进行初始化和脚本运行”，将该项设置为启用。

     1 //path 要显示值的对象id
 2 function BrowseFolder() {
 3                 try {
 4                     var Message = "请选择文件夹";
 5                     var Shell = new ActiveXObject("Shell.Application");
 6                     var Folder = Shell.BrowseForFolder(0, Message, 0x0040, 0x11); //起始目录为：我的电脑
 7                     if (Folder != null) {
 8                         Folder = Folder.items(); // 返回 FolderItems 对象
 9                         Folder = Folder.item();
10                         Folder = Folder.Path; // 返回路径
11                         if (Folder.charAt(Folder.length - 1) != "\") {
12                             Folder = Folder + "\";
13                         }
14                         var bb = document.getElementByIdx_x("<%=txtBackupPath.ClientID%>");     
15                         //document.getElementByIdx_x("BackupPath").value = Folder;
16                         bb.value = Folder;
17                         return Folder;
18                     }
19                 } catch (e) {
20                     alert(e.message);
21                 }
22             }

    Asp.net下，TextBox和Button中的使用方法:

    <asp:TextBox runat="server" ID="txtBackupPath"  Width="488px">E:数据库</asp:TextBox> 
    <asp:Button  runat="server" Text="浏览..." Width="78px" OnClientClick="BrowseFolder()"/>

    这种方法能很好的实现后台对数据的处理，所以相对完美。

    还有一种HTML下的使用方法：

    对应的JS如下：

     1 <script type="text/javascript">
 2 
 3 function browseFolder() {
 4             try {
 5                 var Message = "u8bf7u9009u62e9u6587u4ef6u5939"; //选择框提示信息
 6                 var Shell = new ActiveXObject("Shell.Application");
 7                 var Folder = Shell.BrowseForFolder(0, Message, 64, 17); //起始目录为：我的电脑
 8                 //var Folder = Shell.BrowseForFolder(0,Message,0); //起始目录为：桌面
 9                
10                 if (Folder != null) {
11                     Folder = Folder.items(); // 返回 FolderItems 对象
12                    
13                     Folder = Folder.item(); // 返回 Folderitem 对象
14                     Folder = Folder.Path; // 返回路径
15                    
16                     if (Folder.charAt(Folder.length - 1) != "\") {
17                         Folder = Folder + "\";
18                     }
19                     document.getElementByIdx_x("pathname").value= Folder;
20                     return Folder;
21                 }
22             }
23             catch (e) {
24                 alert(e.message);
25             }
26         }
27 
28 </script>

    HTML对应的文本框和按钮的使用方法：

    <input type="text" id="pathname" /></td>
<input  type="button" onclick="browseFolder()" value="浏览..."/></td>

    这种方法的不完美的地方是后台对文本框数据的处理比较麻烦。


    2.解决方案二:
    自己写一个js读取本地硬盘的选择框, 缺点是外观上较上一个差一些.

      1 <html>
  2 
  3 <head>
  4 
  5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  6 <title>无标题文档</title>
  7 </head>
  8 <body>
  9 <table border="0" cellpadding="0" width="100%" id="tb_show">
 10 <tr>
 11 <td width="18%">文件保存位置:</td>
 12 <td width="82%">
 13 <%--<html:file property="file" size="40" styleClass="inputbox"/>--%>
 14 <input name="backDir" type="text" value ="C:" size="100" width="500">
 15 </td>
 16 </tr>
 17 
 18 <tr>
 19 <td>目录位置:</td>
 20 <td>
 21 <select name="tables_drive" id="tables_drives" onchange="get_drives()" ></select>
 22 </td>
 23 </tr>
 24 
 25 <tr>
 26 <td colspan="2">
 27 <select name="table_folder" id="table_folder" size="10" multiple ondblclick="get_file()"></select>
 28 </td>
 29 </tr>
 30 
 31 <tr>
 32 <td colspan="2">
 33 <font color="red">说明：双击列表框的一个选项，就将该文件夹下面的文件夹显示在该列表框中。第一个就是根目录</font>
 34 </td>
 35 </tr>
 36 </table>
 37 </body>
 38 </html>
 39 <script>
 40 
 41 window.onload = new function init()
 42 {
 43 var fso, s, n, e, x;
 44 fso = new ActiveXObject("Scripting.FileSystemObject");
 45 e = new Enumerator(fso.Drives);
 46 s = "";
 47 for (; !e.atEnd(); e.moveNext())
 48 {
 49 x = e.item();
 50 s = s + x.DriveLetter;
 51 s += ":";
 52 if (x.DriveType == 3)
 53 n = x.ShareName;
 54 else if (x.IsReady)
 55 n = x.VolumeName;
 56 else
 57 n = "[驱动器未就绪]";
 58 s += n + ",";
 59 }
 60 var drives = s.split(",");
 61 var tableDrives = document.getElementByIdx_x("tables_drives");
 62 for ( var i = 0; i < drives.length-1; i++ )
 63 {
 64 var option = document.createElement_x("OPTION");
 65 drives[i].split(":");
 66 option.value = "["+drives[i].split(":")[0]+":]"+drives[i].split(":")[1];
 67 option.text = "["+drives[i].split(":")[0]+":]"+drives[i].split(":")[1];
 68 tableDrives.add(option);
 69 }
 70 }
 71 
 72 
 73 function get_drives()
 74 {
 75 var tableDrives = document.getElementByIdx_x("tables_drives");
 76 var tableFolders = document.getElementByIdx_x("table_folder");
 77 for ( var i = 0; i < tableDrives.options.length; i++ )
 78 {
 79 if ( tableDrives.options[i].selected == true )
 80 {
 81 var fso, f, fc, s;
 82 var drive = tableDrives.options[i].value.split(":")[0].substring(1,tableDrives.options[i].value.split(":")[0].length);
 83 document.getElementByIdx_x("backDir").value = drive + ":\";
 84 fso = new ActiveXObject("Scripting.FileSystemObject");
 85 if (fso.DriveExists(drive))
 86 {
 87 d = fso.GetDrive(drive);
 88 if ( d.IsReady )
 89 {
 90 f = fso.GetFolder(d.RootFolder);
 91 fc = new Enumerator(f.SubFolders);
 92 s = "";
 93 for (; !fc.atEnd(); fc.moveNext())
 94 {
 95 s += fc.item();
 96 s += ",";
 97 }
 98 
 99 var len = tableFolders.options.length;
100 while(len >= 0)
101 {
102 tableFolders.options.remove(len);
103 len--;
104 }
105 var option = document.createElement_x("OPTION");
106 option.value = drive + ":\";
107 option.text = drive + ":\";
108 tableFolders.add(option);
109 var folders = s.split(",");
110 for ( j = 0; j < folders.length -1; j++)
111 {
112 option = document.createElement_x("OPTION");
113 option.value = folders[j];
114 option.text = folders[j];
115 tableFolders.add(option);
116 }
117 }
118 else
119 {
120 alert("无法改变当前内容！")
121 }
122 }
123 else
124 return false;
125 }
126 }
127 }
128 
129 
130 function get_file()
131 {
132 var tableFolders = document.getElementByIdx_x("table_folder");
133 var tableDrives = document.getElementByIdx_x("tables_drives");
134 for ( var i = 0; i < tableFolders.options.length; i++ )
135 {
136 if ( tableFolders.options[i].selected == true )
137 {
138 var fso, f, fc, s;
139 var folderpath = tableFolders.options[i].value.substring(0,tableFolders.options[i].value.length);
140 if ( folderpath.charAt(folderpath.length-1) == "\" )
141 {
142 document.getElementByIdx_x("backDir").value = folderpath;
143 }
144 else
145 {
146 document.getElementByIdx_x("backDir").value = folderpath + "\";
147 }
148 
149 
150 fso = new ActiveXObject("Scripting.FileSystemObject");
151 f = fso.GetFolder(folderpath);
152 fc = new Enumerator(f.SubFolders);
153 s = "";
154 for (; !fc.atEnd(); fc.moveNext())
155 {
156 s += fc.item();
157 s += ",";
158 }
159 var len = tableFolders.options.length;
160 while(len >= 0)
161 {
162 tableFolders.options.remove(len);
163 len--;
164 }
165 var opt = "";
166 var opt1 = "";
167 for ( j = 0; j < folderpath.split("\").length; j++ )
168 {
169 var option = document.createElement_x("OPTION");
170 opt = opt + folderpath.split("\")[j]+"\";
171 if ( j > 0)
172 {
173 opt1 = opt;
174 option.value = opt1.substring(0,opt1.length-1);
175 option.text = opt1.substring(0,opt1.length-1);
176 tableFolders.add(option);
177 }
178 else
179 {
180 option.value = opt;
181 option.text = opt;
182 tableFolders.add(option);
183 }
184 
185 }
186 if ( tableFolders.options[0].value == tableFolders.options[1].value )
187 {
188 tableFolders.options.remove(1);
189 }
190 if ( s != "" )
191 {
192 var folders = s.split(",");
193 for ( j = 0; j < folders.length -1; j++)
194 {
195 option = document.createElement_x("OPTION");
196 option.value = folders[j];
197 option.text = folders[j];
198 tableFolders.add(option);
199 }
200 }
201 }
202 }
203 }
204 </script>

     本文地址：http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html
  • 相关阅读:
    常用的 JavaScript 简写方法
    user-select详解
    惊人的CSS和JavaScript动画logos例子
    debounce与throttle区别
    Vue.js中data,props和computed数据
    字体图标出现乱码的兼容方案
    ios调用Html内JS alert 不能点击关闭为甚?
    统一诊断服务 (Unified diagnostic services ， UDS) （二）
    统一诊断服务 (Unified diagnostic services ， UDS) （一）
    CAN总线同步
  • 原文地址：https://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html
Copyright © 2011-2022 走看看