使用JavaScript实现一个本地文件选择器功能
由于想实现一个获取用户本地目录的功能，需要来实现一个文件选择器。在网上找了一下，基本都需要第三方组件来实现，后来看到了有人写的一个使用JavaScript实现的文件选择器，感觉很有意思。下下来看了一下，代码写的很糟糕，无论是规范还是逻辑，自己将其中重构了一下，同时加入了比较漂亮的页面，成了一个感觉不错的文件选择器。
/**
* 页面初始化,获得计算机中的驱动器列表
*/
function init(){
/*初始化选择器信息*/
var fso = new ActiveXObject("Scripting.FileSystemObject");//创建FileSystemObject对象
var enmu = new Enumerator(fso.Drives);//获得驱动器枚举对象
var driverList = "";//定义driverList用于存储驱动器信息
/*遍历驱动器列表*/
for (; !enmu.atEnd(); enmu.moveNext()){
var dirverInfo;//定义驱动器信息
var driver = enmu.item();//获得驱动器
driverList = driverList + driver.DriveLetter;//获得驱动器盘符
driverList += ":";
if(driver.DriveType == 3){
dirverInfo = driver.ShareName;
}
else if(driver.IsReady){
dirverInfo = driver.VolumeName;
}else{
dirverInfo = "[驱动器未就绪]";
}
driverList += dirverInfo + ",";
}
var drives = driverList.split(",");
var sysDrivers = document.getElementById("sysDrivers");
/*将信息添加进入页面中的驱动器列表*/
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];
sysDrivers.add(option);
}
}
/**
* 获取某个驱动器下的所有文件夹
*/
function getDriverContent(){
var sysDrivers = document.getElementById("sysDrivers");//驱动器列表
var driverFolders = document.getElementById("driverFolders");//当前文件夹列表
var backDir = document.getElementById("backDir");//路径返回值
/*遍历驱动器列表取得当前选择的驱动器*/
for (var i = 0; i < sysDrivers.options.length; i++){
if(sysDrivers.options[i].selected == true){
var driverName = sysDrivers.options[i].value.split(":")[0].substring(1,sysDrivers.options[i].value.split(":")[0].length);//获得当前选中的盘符
backDir.value = driverName + ":\\";//将选中的盘符路径存入前台显示的路径
var fso = new ActiveXObject("Scripting.FileSystemObject");//创建FileSystemObject对象
if(fso.DriveExists(driverName)){
/*盘符存在,处理此驱动器下所有文件夹信息*/
var driver = fso.GetDrive(driverName);
if(driver.IsReady){//检验驱动器是否可用
var rootFolder = fso.GetFolder(driver.RootFolder);//获得驱动器根目录
var folderEnmu = new Enumerator(rootFolder.SubFolders);//枚举根目录
/*清空现有文件夹列表*/
var currLength = driverFolders.options.length;
while(currLength >= 0){
driverFolders.options.remove(currLength);
currLength--;
}
/*将当前的选中的驱动器加入文件夹列表(用于今后实现返回上一步)*/
var option = document.createElement("option");
option.value = driverName + ":\\";
option.text = driverName + ":\\";
driverFolders.add(option);
/*遍历创建根目录下的文件夹列表*/
for(; !folderEnmu.atEnd(); folderEnmu.moveNext()){
var option = document.createElement("option");
option.value = folderEnmu.item();
option.text = folderEnmu.item();
driverFolders.add(option);
}
}else{
alert("无法改变当前内容！");
return false;
}
}else{
return false;
}
}
}
}
/**
* 获得某个文件夹下的所有内容
*/
function getFoderContent(){
var sysDrivers = document.getElementById("sysDrivers");//驱动器列表
var driverFolders = document.getElementById("driverFolders");//当前文件夹列表
/*遍历驱动器列表取得当前选择的驱动器*/
for(var i = 0; i < driverFolders.options.length; i++){
if(driverFolders.options[i].selected == true){
var folderpath = driverFolders.options[i].value.substring(0,driverFolders.options[i].value.length);//当前驱动器路径
if(folderpath.charAt(folderpath.length - 1) == "\\"){
document.getElementById("backDir").value = folderpath;
}else{
document.getElementById("backDir").value = folderpath + "\\";
}
var fso = new ActiveXObject("Scripting.FileSystemObject");//创建FileSystemObject对象
var folder = fso.GetFolder(folderpath);//获得选中的文件夹信息
folderEnmu = new Enumerator(folder.SubFolders);//文件夹枚举
var s = "";
/*遍历文件夹下内容*/
for (;!folderEnmu.atEnd(); folderEnmu.moveNext()){
s += folderEnmu.item();
s += ",";
}
/*清空现有文件夹列表*/
var currLength = driverFolders.options.length;
while(currLength >= 0){
driverFolders.options.remove(currLength);
currLength--;
}
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);
driverFolders.add(option);
}else{
/*生成当前目录*/
option.value = opt;
option.text = opt;
driverFolders.add(option);
}
}
/*清空重复值*/
if(sysDrivers.options[0].value == sysDrivers.options[1].value){
sysDrivers.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];
driverFolders.add(option);
}
}
}
}
}
具体的实现和效果可以查看附近，附件已经将此部分内容与HTML结合起来，可以直接运行，效果如图