TIPS：本文共有 6921 个字，阅读大概需要 14 分钟。
本项目旨在通过XML、FSO和JavaScript技术，实现服务器端文件的选择效果。基于XML展示文件目录结构，通过FSO读取服务器端文件数据，并借助JavaScript实现交互功能。用户可通过界面操作方便地选择需要的文件，提升文件管理效率。这一方案将为服务器端文件选择带来便利，同时结合多种前端技术，使得操作更加智能高效。
设计创意栏目是一个分享最好最实用的教程的社区，我们拥有最用心的各种教程，今天就给大家分享用XML+FSO+JS实现服务器端文件的选择效果的教程，热爱PS的朋友们快点看过来吧！
%
written by Linzhang Chen ,-4-20
转载请注明出处和保留此版权信息
"?xml version=""1.0"" encoding=""GB2312""?"&chr(13)
"mediafile"&chr(13)
folders=request("folder")
if folders="/" then
folders=""
end if
dim count
count=0
folders=replace(folders,"..","")
basefolder="../media/"基准的文件夹路径
newfolder=basefolder&folders
Set fso =server.CreateObject("Scripting.FileSystemObject")
set f=fso.getfolder(server.mappath(newfolder))
set sf=f.subfolders
for each fd in sf返回指定路径下面的文件夹列表
"file"&chr(13)
"ftypefolder/ftype"&chr(13)
"fname"&fd.name&"/fname"&chr(13)
"/file"&chr(13)
count=count+1
next
set sf=nothing
set ff=f.Files
for each fi in ff
fname=fi.name
if instr("asf,wma,wmv",lcase(mid(fname,instrrev(fname,".")+1)))0 then设定允许返回的文件类型，防止源码泄露
"file"&chr(13)
"ftypefile/ftype"&chr(13)
"fname"&fname&"/fname"&chr(13)
"/file"&chr(13)
count=count+1
end if
next
如果该目录下没有文件，就发一个空元素
if count=0 then
"file"&chr(13)
"ftypeempty/ftype"&chr(13)
"fname0/fname"&chr(13)
"/file"&chr(13)
end if
"/mediafile"
set ff=nothing
set f=nothing
set fso=nothing
%
下面就是客户端的JS的功夫了(selectfile.asp)
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
HEAD
TITLE 选择视频文件 /TITLE
style
td{font-size:9pt}
select{width:210}
.s2{width:250}
/style
SCRIPT LANGUAGE="JavaScript"
!--
/*written by Linzhang Chen ,-4-20
转载请注明出处和保留此版权信息 */
//预装载图片
var imgback = new Image();
imgback.src = "images/arrow.gif";
var imgbackgray = new Image();
imgbackgray.src = "images/grayarrow.gif";
var imgfolder = new Image();
imgfolder.src = "images/folder.gif";
var imggrayfolder = new Image();
imggrayfolder.src = "images/grayfolder.gif";
//历史记录数组栈
var arrhistory=new Array();
var hisi=0;
//用来确定要返回文件名
function check()
{
if (document.all.filename.value=="")
{
alert("请先选择文件");
return false;
}
else
{
window.returnValue =document.f1.folder.value+document.all.filename.value;
window.close();
}
}
//取得XML文件的内容
function getuserlist(url)
{var oXMLDoc = new ActiveXObject(MSXML);
oXMLDoc.url = url;
var ooRoot=oXMLDoc.root;
return ooRoot;
}
//当选中一个文件时，把这个值返回给文本框
function addfile(txt)
{
document.all.filename.value=txt;
}
var first=1;//定义一个全局变量
function userlist(folders,ti)//列出所选框
{document.f1.folder.value=folders;
filebox.document.body.innerHTML="正在加载文件，请稍侯...";
var strshow="";
var timeoutid=null;
var newfolder="";
var arrfolder=new Array();
var arrff=new Array();
var blankstr="";
var oItem;
//确定历史状态
hisi+=ti;
arrhistory[hisi]=folders;
if (hisi==0)
{
arrow.innerHTML="img src="images/grayarrow.gif"";
}
else
{
arrow.innerHTML="img src="images/arrow.gif" border=0"+arrhistory[hisi-1]+",-1)" onmouseover="this.src="images/arrow_over.gif"" onmouseout="this.src="images/arrow.gif""";
}
//确定当前的文件夹
if (document.f1.folder.value=="")
{
folderid.innerHTML="img src="images/grayfolder.gif""
}
else
{newsfolder=checkfolder(document.f1.folder.value)
folderid.innerHTML="img src="images/folder.gif" border=0"+newsfolder+",1)" onmouseover="this.src="images/folder_over.gif"" onmouseout="this.src="images/folder.gif"""
}
//给下拉框赋值
document.all.select.options.length=0;
newfolder=folders;
folderstr=""
var _obj=document.all.select;
var _o=document.createElement("Option");
_o.text="选择文件夹";
_o.value="";
_obj.add(_o);
if (newfolder!="")
{arrfolder=newfolder.split("/")
for(var i=0;iarrfolder.length-1;i++)
{blankstr+=" ";
folderstr+=arrfolder[i]+"/";
_o=document.createElement("Option");
_o.text=blankstr+arrfolder[i];
_o.value=folderstr;
_obj.add(_o);
}
}
document.all.select.options[document.all.select.options.length-1].selected=true;
url="getfolder.asp.gl?folder="+folders;
oRoot=getuserlist(url)
strshow="table class=file cellspacing=0 cellpadding=0";
len=oRoot.children.length;
if (len==1)
{oItem = oRoot.children.item(0);
if(oItem.children.item(0).text=="empty")
strshow="没有文件和文件夹了";
else
{
if(oItem.children.item(0).text=="folder")
{
strshow+="trtdA href="javascript：parent.userlist(\"+folders+oItem.children.item(1).text+"/"+",1)"img src="images/mediafolder.gif" border=0 "+oItem.children.item(1).text+"/A/td/tr";
}
else
{
strshow+="trtda href="javascript：parent.addfile(\"+oItem.children.item(1).text+")" img src="images/mediafile.gif" border=0"+oItem.children.item(1).text+"/A/td/tr";
}
}
strshow+="/table"
}
else{
//数据入栈
for(i=0;ilen;i++)
{ oItem = oRoot.children.item(i);
if(oItem.children.item(0).text=="folder")
{
arrff[i]="A href="javascript：parent.userlist(\"+folders+oItem.children.item(1).text+"/"+",1)"img src="images/mediafolder.gif" border=0"+oItem.children.item(1).text+"/A";
}
else
{
arrff[i]="A href="javascript：parent.addfile(\"+oItem.children.item(1).text+")"img src="images/mediafile.gif" border=0 height=12"+oItem.children.item(1).text+"/A";
}
}
//取得要输出的列数
if (len=6)
{x=1;
y=6;}
else
{x=len/6;
y=6;}
for(var i=0;iy;i++)
{strshow+="tr"
for(var j=0;jx;j++)
{ponits=j*y+i;
if (ponits=len)
{
strshow+="td /td";
}
else
{
strshow+="td"+arrff[ponits]+"/td";
}
}
strshow+="/tr"
}
strshow+="/table"
}
filebox.document.body.innerHTML=strshow;
}
//--
/SCRIPT
script LANGUAGE="vbscript"
function checkfolder(folderstr)
if (folderstr="" or instr(folderstr,"/")=instrrev(folderstr,"/")) then
checkfolder=""
else
nfolder=left(folderstr,len(folderstr)-1)
checkfolder=left(nfolder,instrrev(nfolder,"/"))
end if
end function
/script
/HEAD
BODY bgColor=menu onload="javascript：userlist(\,0)"
table width="443" cellspacing="0"
tr
td height="36"table width="409"
tr
td width="73" align="right"查找范围(uI/u):/td
td width="214"select name="select" size="1" onchange="javascript：userlist(this.value,1);"
/select/td
td width="22" valign="baseline" align=right/td
td width="20" valign="middle"/td
td width="20" align="left"img src="images/md.gif" width="16" height="15"/td
td width="28" align="left"img src="images/viewtype.gif" width="23" height="14"/td
/tr
/table/td
/tr
tr
td height="120"table width="100%" height="100%"
tr
td width="9" /td
td
iframe src="blank.htm" width=415 height=120/iframe/td
td width="13" /td
/tr
/table/td
/tr
tr
td height="60"table width="100%"
FORM METHOD=POST ACTION="" name="f1"
input type="hidden" name="folder" value=""
tr
td width="85" align="right"文件名(uN/u): /td
td width="254"input type="text" size="34"/td
tdbutton 打开(uO/U)/button/td
/tr
/FORM
tr
td align="right"文件类型(uT/u):/td
tdselect name="select2" class=s2
option流媒体文件(*.asf,*.wmv,*.wma)/option
/select/td
tdinput type="button" name="Submit" value=" 取消 "/td
/tr
/table/td
/tr
/table
/BODY
/HTML
里面还有一个小文件blank.htm用来定义文件和文件夹显示的样式
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
HEAD
TITLE New Document /TITLE
style
td{font-size:9pt}
body{font-size:9pt}
.file A{COLOR: #000000; TEXT-DECORATION: none;font-size:9pt}
.file A:visited{COLOR: #000000; TEXT-DECORATION: none;font-size:9pt}
.file A:hover {COLOR: #000000; TEXT-DECORATION: none;font-size:9pt}
/style
/HEAD
BODY
/BODY
/HTML
调用的时候用以下函数，就可以实现以假乱真的服务器端选择文件的效果
function selectfile()
{
var arr = showModalDialog("selectfile.asp?temp="+Math.random(), "", "dialogWidth:453px; dialogHeight:252px; status:0;help:1");
if (arr != null)
{
return arr
}
}
该函数最后返回的是选中的文件名,函数里面所使用的几张图片大家就自已从文件选择框上抓了：）
小编关于《使用XML FSO和JavaScript实现服务器端文件选择功能》就分享到这儿了，如果内容对你有帮助，记得点赞加收藏哦！
