用XML+FSO+JS實作伺服器端檔案的選擇效果實作程式碼,需要的朋友可以參考下
<%
'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 <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>
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 ,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,/)) 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>找出範圍(<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
}
}
函數最後回傳的是選取的檔名,函數裡面所使用的幾張圖片大家就自已從檔案選擇框上抓了:)