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

【 tulaoshi.com - Web开发 】

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

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）

　%
　'written by Linzhang Chen ,2003-4-20
　' 转载请注明出处和保留此版权信息
　response.write "？xml version=""1.0"" encoding=""GB2312""？"&chr(13)
　response.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 "ftypefolder/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 "ftypefile/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 "ftypeempty/ftype"&chr(13)
　response.write "fname0/fname"&chr(13)
　response.write "/file"&chr(13)
　end if
　response.write "/mediafile"
　set ff=nothing
　set f=nothing
　set fso=nothing
　%

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

　!DOCTYPE HTML PUBLIC "-//W3C//DT
D 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 ,2003-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 style="cursor:hand" onclick="userlist('"+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 style="cursor:hand" onclick="userlist('"+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 style="margin:0" bgColor=menu onload="javascript:userlist('',0)"
　table width="443" border="0" cellspacing="0"
　 tr
　 td height="36"table width="409" border="0"
　 tr
　 td width="73" align="right"查找范围(uI/u):/td
　 td width="214"select name="select" id="select" size="1" onchange="javascript:userlist(this.value,1);"
　 /select/td
　 td width="22" valign="baseline" id="arrow" align=right/td
　 td width="20" valign="middle" id="folderid"/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%" border="0"
　 tr
　 td width="9"/td
　 td
iframe src="blank.htm" width=415 height=120 id="filebox"/iframe/td
　 td width="13"/td
　 /tr
　 /table/td
/tr
　 tr
　 td height="60"table width="100%" border="0"
　 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" id="filename" size="34"/td
　 tdbutton onclick="javascript:return check()" 打开(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=" 取消 " onclick="window.close();"/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 style="margin: 0pt"
　/BODY
　/HTML
　 调用的时候用以下函数，就可以实现以假乱真的服务器端选择文件的效果

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）

　function selectfile()
　{
　var arr = showModalDialog("selectfile.asp？temp="+Math.random(),
dialogWidth:453px; dialogHeight:252px; status:0;help:1");
　 if (arr != null)
　 {
　 return arr
　 }
　}

　　该函数最后返回的是选中的文件名,函数里面所使用的几张图片大家就自已从文件选择框上抓了：）