Two solutions to the Javascript folder selection box _javascript tips

Source: Internet
Author: User
Solution 1:
Call Windows's shell, but there are security issues.

* Browsefolder.js
* This file defines the Browsefolder () function, which provides a folder selection dialog box
* For the user to implement the System folder selection function
* Folder selection dialog starting directory by
* Shell.browseforfolder (window_handle, message, OPTIONS, strpath) function
* The strpath parameter setting
* For example: 0x11--My Computer
* 0--Desktop
* "c:\\"-System C disk
*
* Apply the function to an HTML file with the following code:
* <script src= "Browsefolder.js" ></script>
* or copy the following code directly to <script language= "javascript" >...</script> tags;

* Special attention is, due to security issues, you also need to set the following to make this JS code correctly run,
* No person will appear with "No permissions" problem.
*
* 1, to set up a trusted site (for example, local can be: http://localhost)
* 2, Second: Trusted Site Security Level customization Settings: Set the following options
* "Initialize and script ActiveX controls that are not marked as safe"----"Enabled"

Browserfolder.js:
Copy Code code as follows:

/**//***
Path object ID to display a value
****/
function Browsefolder (path) {
try {
var message = "\u8bf7\u9009\u62e9\u6587\u4ef6\u5939"; Select box Hint Info
var Shell = new ActiveXObject ("Shell.Application");
var Folder = shell.browseforfolder (0, message, 64, 17);//The Starting directory is: My Computer
var Folder = Shell.browseforfolder (0,message,0); The starting directory is: desktop
if (Folder!= null) {
Folder = Folder.items (); Returns the Folderitems object
Folder = Folder.item (); Returns the FolderItem object
Folder = Folder.path; return path
if (Folder.charat (folder.length-1)!= "\") {
folder = folder + "\";
}
document.getElementById (path). value = Folder;
return Folder;
}
}
catch (e) {
alert (e.message);
}
}

When in use:
Copy Code code as follows:

<td>
<input type= "text" name= "path"/>
</td>
<td>
<input type= "button" onclick= "Browsefolder (' path ')"
value= "Select Build Path"/>
</td>

2. Solution II:
Write yourself a JS read the local hard drive selection box, the disadvantage is that the appearance of a little less than the previous.
Copy Code code as follows:

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> Untitled Document </title>
<body>
<table border= "0" cellpadding= "0" width= "100%" id= "Tb_show" >
<tr>
&LT;TD width= "18%" > File save location:</td>
&LT;TD width= "82%" >
<%--<input name= "Backdir" type= "text" value = "C:\" size= "M" width= "M" >
</td>
</tr>

<tr>
<td> Directory Location:</td>
<td>
<select name= "tables_drive" id= "tables_drives" onchange= "get_drives ()" ></select>
</td>
</tr>

<tr>
&LT;TD colspan= "2" >
<select name= "Table_folder" id= "Table_folder" size= "ten" multiple Ondblclick= "Get_file ()" ></select>
</td>
</tr>

<tr>
&LT;TD colspan= "2" >
<font color= "Red" > Description: Double-click an option in the list box to display the folder below the folder in the list box. The first one is the root directory </font>
</td>
</tr>
</table>
</body>
<script>
/**//*
* Initialize, put all the drives of the system into the Table_drives list
*/
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 = "[Drive not Ready]";
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 all folders in the selected drive list into the Table_folder list
*/
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 ("Cannot change the current content!") ")
}
}
Else
return false;
}
}
}

/**//*
*table_folder Double-click an option in the option to display the folder below the folder in the Table_folder list.
*/
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>

If you still have a good solution, please share the reply.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.