用XML+FSO+JS实现服务器端文件的选择

首先在服务器端先创建一个程序可以生成XML文件，以返回客户端，（getfolder.asp）

1   
2'written by Linzhang Chen ,2003-4-20   
3' 转载请注明出处和保留此版权信息   
4response.write "
5<?xml version=""1.0"" encoding=""GB2312""?>
6"&chr(13)   
7response.write "

<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'返回指定路径下面的文件夹列表
response.write "<file>"&chr(13)
response.write "<ftype>folder</ftype>"&chr(13)
response.write "<fname>"&fd.name&"</fname>"&chr(13)
response.write "</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'设定允许返回的文件类型，防止源码泄露
response.write "<file>"&chr(13)
response.write "<ftype>file</ftype>"&chr(13)
response.write "<fname>"&fname&"</fname>"&chr(13)
response.write "</file>"&chr(13)
count=count+1
end if
next
'如果该目录下没有文件，就发一个空元素
if count=0 then
response.write "<file>"&chr(13)
response.write "<ftype>empty</ftype>"&chr(13)
response.write "<fname>0</fname>"&chr(13)
response.write "</file>"&chr(13)
end if
response.write "</mediafile>

1"   
2set ff=nothing   
3set f=nothing   
4set fso=nothing

下面就是客户端的JS的功夫了(selectfile.asp)

  1<html>
  2<head>
  3<title> 选择视频文件 </title>
  4<style>   
  5td{font-size:9pt}   
  6select{width:210}   
  7.s2{width:250}   
  8</style>
  9<script language="JavaScript">   
 10<!--   
 11/*written by Linzhang Chen ,2003-4-20   
 12转载请注明出处和保留此版权信息 */ 
 13
 14//预装载图片   
 15var imgback = new Image();   
 16imgback.src = "images/arrow.gif";   
 17var imgbackgray = new Image();   
 18imgbackgray.src = "images/grayarrow.gif";   
 19var imgfolder = new Image();   
 20imgfolder.src = "images/folder.gif";   
 21var imggrayfolder = new Image();   
 22imggrayfolder.src = "images/grayfolder.gif";   
 23//历史记录数组栈   
 24var arrhistory=new Array();   
 25var hisi=0;   
 26//用来确定要返回文件名   
 27function check()   
 28{   
 29if (document.all.filename.value=="")   
 30{   
 31alert("请先选择文件");   
 32return false;   
 33}   
 34else   
 35{   
 36window.returnValue =document.f1.folder.value+document.all.filename.value;   
 37window.close();   
 38}   
 39}   
 40//取得XML文件的内容   
 41function getuserlist(url)   
 42{ var oXMLDoc = new ActiveXObject('MSXML');   
 43oXMLDoc.url = url;   
 44var ooRoot=oXMLDoc.root;   
 45return ooRoot;   
 46}   
 47//当选中一个文件时，把这个值返回给文本框   
 48function addfile(txt)   
 49{   
 50document.all.filename.value=txt;   
 51} 
 52
 53var first=1;//定义一个全局变量 
 54
 55function userlist(folders,ti)//列出所选框   
 56{document.f1.folder.value=folders;   
 57filebox.document.body.innerHTML="正在加载文件，请稍侯...";   
 58var strshow="";   
 59var timeoutid=null;   
 60var newfolder="";   
 61var arrfolder=new Array();   
 62var arrff=new Array();   
 63var blankstr="";   
 64var oItem;   
 65//确定历史状态   
 66hisi+=ti;   
 67arrhistory[hisi]=folders;   
 68if (hisi==0)   
 69{   
 70arrow.innerHTML="<img src=\"images/grayarrow.gif\">";   
 71}   
 72else   
 73{   
 74arrow.innerHTML="<img src=\"images/arrow.gif\" border=0 style=\"cursor:hand\" onclick=\"userlist('"+arrhistory[hisi-1]+"',-1)\" onmouseover=\"this.src='images/arrow_over.gif'\" onmouseout=\"this.src='images/arrow.gif'\">";   
 75}   
 76//确定当前的文件夹   
 77if (document.f1.folder.value=="")   
 78{   
 79folderid.innerHTML="<img src=\"images/grayfolder.gif\">"   
 80}   
 81else   
 82{newsfolder=checkfolder(document.f1.folder.value)   
 83folderid.innerHTML="<img src=\"images/folder.gif\" border=0 style=\"cursor:hand\" onclick=\"userlist('"+newsfolder+"',1)\" onmouseover=\"this.src='images/folder_over.gif'\" onmouseout=\"this.src='images/folder.gif'\">"   
 84}   
 85//给下拉框赋值   
 86document.all.select.options.length=0;   
 87newfolder=folders;   
 88folderstr=""   
 89var _obj=document.all.select;   
 90var _o=document.createElement("Option");   
 91_o.text="选择文件夹";   
 92_o.value="";   
 93_obj.add(_o);   
 94if (newfolder!="")   
 95{arrfolder=newfolder.split("/")   
 96for(var i=0;i<arrfolder.length-1;i++)   
 97{blankstr+=" ";   
 98folderstr+=arrfolder[i]+"/";   
 99_o=document.createElement("Option");   
100_o.text=blankstr+arrfolder[i];   
101_o.value=folderstr;   
102_obj.add(_o);   
103  
104}   
105}   
106document.all.select.options[document.all.select.options.length-1].selected=true;   
107url="getfolder.asp.gl?folder="+folders;   
108oRoot=getuserlist(url)   
109strshow="<table class=file cellspacing=0 cellpadding=0>";   
110len=oRoot.children.length;   
111if (len==1)   
112{oItem = oRoot.children.item(0);   
113if(oItem.children.item(0).text=="empty")   
114strshow="没有文件和文件夹了";   
115else   
116{   
117if(oItem.children.item(0).text=="folder")   
118{   
119strshow+="<tr><td><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></td></tr>";   
120}   
121else   
122{   
123strshow+="<tr><td><a href=\"javascript:parent.addfile('"+oItem.children.item(1).text+"')\" ><img src=\"images/mediafile.gif\" border=0>"+oItem.children.item(1).text+"</A></td></tr>";   
124  
125}   
126}   
127strshow+="</table>"   
128}   
129else{   
130//数据入栈   
131for(i=0;i<len;i++)   
132{ oItem = oRoot.children.item(i);   
133if(oItem.children.item(0).text=="folder")   
134{   
135arrff[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>";   
136}   
137else   
138{   
139arrff[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>";   
140  
141}   
142}   
143//取得要输出的列数   
144if (len<=6)   
145{x=1;   
146y=6;}   
147else   
148{x=len/6;   
149y=6;}   
150for(var i=0;i<y;i++)   
151{strshow+="<tr>"   
152for(var j=0;j<x;j++)   
153{ponits=j*y+i;   
154if (ponits>=len)   
155{   
156strshow+="<td>&nbsp;</td>";   
157}   
158else   
159{   
160strshow+="<td>"+arrff[ponits]+"</td>";   
161}   
162}   
163strshow+="</tr>"   
164} 
165
166strshow+="</table>"   
167}   
168filebox.document.body.innerHTML=strshow;   
169}   
170//-->   
171</script>
172<script language="vbscript">   
173function checkfolder(folderstr)   
174if (folderstr="" or instr(folderstr,"/")=instrrev(folderstr,"/")) then   
175checkfolder=""   
176else   
177nfolder=left(folderstr,len(folderstr)-1)   
178checkfolder=left(nfolder,instrrev(nfolder,"/"))   
179end if   
180end function   
181</script>
182</head>
183<body bgcolor="menu" onload="javascript:userlist('',0)" style="margin:0">
184<table border="0" cellspacing="0" width="443">
185<tr>
186<td height="36"><table border="0" width="409">
187<tr>
188<td align="right" width="73">查找范围(<u>I</u>):</td>
189<td width="214"><select id="select" name="select" onchange="javascript:userlist(this.value,1);" size="1">
190</select></td>
191<td align="right" id="arrow" valign="baseline" width="22"></td>
192<td id="folderid" valign="middle" width="20"></td>
193<td align="left" width="20"><img height="15" src="images/md.gif" width="16"/></td>
194<td align="left" width="28"><img height="14" src="images/viewtype.gif" width="23"/></td>
195</tr>
196</table></td>
197</tr>
198<tr>
199<td height="120"><table border="0" height="100%" width="100%">
200<tr>
201<td width="9"> </td>
202<td>
203<iframe height="120" id="filebox" src="blank.htm" width="415"></iframe></td>
204<td width="13"> </td>
205</tr>
206</table></td>
207</tr>
208<tr>
209<td height="60"><table border="0" width="100%">
210<form action="" method="POST" name="f1">
211<input name="folder" type="hidden" value=""/>
212<tr>
213<td align="right" width="85">文件名(<u>N</u>):  </td>
214<td width="254"><input id="filename" size="34" type="text"/></td>
215<td><button onclick="javascript:return check()"> 打开(<u>O</u>)</button></td>
216</tr>
217</form>
218<tr>
219<td align="right">文件类型(<u>T</u>):</td>
220<td><select class="s2" name="select2">
221<option>流媒体文件(*.asf,*.wmv,*.wma)</option>
222</select></td>
223<td><input name="Submit" onclick="window.close();" type="button" value=" 取消 "/></td>
224</tr>
225</table></td>
226</tr>
227</table>
228</body>
229</html>

里面还有一个小文件blank.htm用来定义文件和文件夹显示的样式

 1<html>
 2<head>
 3<title> New Document </title>
 4<style>   
 5td{font-size:9pt}   
 6body{font-size:9pt}   
 7.file A{COLOR: #000000; TEXT-DECORATION: none;font-size:9pt}   
 8.file A:visited{COLOR: #000000; TEXT-DECORATION: none;font-size:9pt}   
 9.file A:hover {COLOR: #000000; TEXT-DECORATION: none;font-size:9pt}   
10</style>
11</head>
12<body style="margin: 0pt">
13</body>
14</html>

调用的时候用以下函数，就可以实现以假乱真的服务器端选择文件的效果
function selectfile()
{
var arr = showModalDialog("selectfile.asp?temp="+Math.random(), "", "dialogWidth:453px; dialogHeight:252px; status:0;help:1");
if (arr != null)
{
return arr
}
}
该函数最后返回的是选中的文件名,函数里面所使用的几张图片大家就自已从文件选择框上抓了：）
估计在使用过程中可能还会遇到各种未知的BUG欢迎大家和我来交流:E_mail:[email protected]