<%'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="/" thenfolders=""end ifdim countcount=0folders=replace(folders,"..","")basefolder="../media/"'基准的文件夹路径newfolder=basefolder&foldersSet fso =server.CreateObject("Scripting.FileSystemObject")set f=fso.getfolder(server.mappath(newfolder))set sf=f.subfoldersfor 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+1nextset sf=nothingset ff=f.Filesfor each fi in fffname=fi.nameif 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+1end ifnext'如果该目录下没有文件,就发一个空元素if count=0 thenresponse.write "<file>"&chr(13)response.write "<ftype>empty</ftype>"&chr(13)response.write "<fname>0</fname>"&chr(13)response.write "</file>"&chr(13)end ifresponse.write "</mediafile>"set ff=nothingset f=nothingset 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 ,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;i<arrfolder.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+="<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>"; } else { strshow+="<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>"; } } strshow+="</table>" } else{ //数据入栈 for(i=0;i<len;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;i<y;i++) {strshow+="<tr>" for(var j=0;j<x;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,"/")) thencheckfolder=""elsenfolder=left(folderstr,len(folderstr)-1)checkfolder=left(nfolder,instrrev(nfolder,"/"))end ifend 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">查找范围(<u>I</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">文件名(<u>N</u>): </td> <td width="254"><input type="text" id="filename" size="34"></td> <td><button onclick="javascript:return check()"> 打开(<u>O</U>)</button></td> </tr> </FORM> <tr> <td align="right">文件类型(<u>T</u>):</td> <td><select name="select2" class=s2> <option>流媒体文件(*.asf,*.wmv,*.wma)</option> </select></td> <td><input 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> 调用的时候用以下函数,就可以实现以假乱真的服务器端选择文件的效果function selectfile(){var arr = showModalDialog("selectfile.asp?temp="+Math.random(), "", "dialogWidth:453px; dialogHeight:252px; status:0;help:1"); if (arr != null) { return arr }} 该函数最后返回的是选中的文件名,函数里面所使用的几张图片大家就自已从文件选择框上抓了:)
推荐阅读
用Command对象和RecordSet对象向数据库增加记录哪一个更好
用Command对象和RecordSet对象向数据库增加记录哪一个更好?请问应该选择哪一个?Command是用来做参数传递的,尤其是批量参数传递。Command对象主要是向SQL语句、StoredProcude传递参数,依靠SQL的强大功能来完成数>>>详细阅读
本文标题:用XML+FSO+JS实现服务器端文件的选择效果
地址:http://www.17bianji.com/kaifa2/ASP/33309.html
1/2 1