First, create a program on the server side to generate an XML file to return to the client, ()
<%
'written by Linzhang Chen ,2003-4-20
' Please indicate the source and retain this copyright information when reprinting
"<?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/"'Base folder path
newfolder=basefolder&folders
Set fso =("")
set f=((newfolder))
set sf=
for each fd in sf' returns the list of folders below the specified path
"<file>"&chr(13)
"<ftype>folder</ftype>"&chr(13)
"<fname>"&&"</fname>"&chr(13)
"</file>"&chr(13)
count=count+1
next
set sf=nothing
set ff=
for each fi in ff
fname=
if instr("asf,wma,wmv",lcase(mid(fname,instrrev(fname,".")+1)))>0 then' Set the file type that is allowed to be returned to prevent source code leakage
"<file>"&chr(13)
"<ftype>file</ftype>"&chr(13)
"<fname>"&fname&"</fname>"&chr(13)
"</file>"&chr(13)
count=count+1
end if
next
'If there is no file in this directory, send an empty element
if count=0 then
"<file>"&chr(13)
"<ftype>empty</ftype>"&chr(13)
"<fname>0</fname>"&chr(13)
"</file>"&chr(13)
end if
"</mediafile>"
set ff=nothing
set f=nothing
set fso=nothing
%>
The following is the client's JS kung fu ()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select a video file </TITLE>
<style>
td{font-size:9pt}
select{width:210}
.s2{width:250}
</style>
<SCRIPT LANGUAGE="javascript">
<!--
/*written by Linzhang Chen ,2003-4-20
Please indicate the source and retain this copyright information when reprinting */
//Preload pictures
var imgback = new Image();
= "images/";
var imgbackgray = new Image();
= "images/";
var imgfolder = new Image();
= "images/";
var imggrayfolder = new Image();
= "images/";
//History record array stack
var arrhistory=new Array();
var hisi=0;
// Used to determine the file name to be returned
function check()
{
if (=="")
{
alert("Please select file first");
return false;
}
else
{
=document.+;
();
}
}
//Get the contents of the XML file
function getuserlist(url)
{ var oXMLDoc = new ActiveXObject('MSXML');
= url;
var ooRoot=;
return ooRoot;
}
//When a file is selected, return this value to the text box
function addfile(txt)
{
=txt;
}
var first=1;//Define a global variable
function userlist(folders,ti)//list selected boxes
{document.=folders;
="The file is loading, please wait...";
var strshow="";
var timeoutid=null;
var newfolder="";
var arrfolder=new Array();
var arrff=new Array();
var blankstr="";
var oItem;
//Determine the historical status
hisi+=ti;
arrhistory[hisi]=folders;
if (hisi==0)
{
="<img src=\"images/\">";
}
else
{
="<img src=\"images/\" border=0 style=\"cursor:hand\" onclick=\"userlist('"+arrhistory[hisi-1]+"',-1)\" onmouseover=\"='images/arrow_over.gif'\" onmouseout=\"='images/'\">";
}
//Confirm the current folder
if (document.=="")
{
="<img src=\"images/\">"
}
else
{newsfolder=checkfolder(document.)
="<img src=\"images/\" border=0 style=\"cursor:hand\" onclick=\"userlist('"+newsfolder+"',1)\" onmouseover=\"='images/folder_over.gif'\" onmouseout=\"='images/'\">"
}
// Assign values to the drop-down box
=0;
newfolder=folders;
folderstr=""
var _obj=;
var _o=("Option");
_o.text="Select folder";
_o.value="";
_obj.add(_o);
if (newfolder!="")
{arrfolder=("/")
for(var i=0;i<-1;i++)
{blankstr+=" ";
folderstr+=arrfolder[i]+"/";
_o=("Option");
_o.text=blankstr+arrfolder[i];
_o.value=folderstr;
_obj.add(_o);
}
}
[-1].selected=true;
url="?folder="+folders;
oRoot=getuserlist(url)
strshow="<table class=file cellspacing=0 cellpadding=0>";
len=;
if (len==1)
{oItem = (0);
if((0).text=="empty")
strshow="No files and folders";
else
{
if((0).text=="folder")
{
strshow+="<tr><td><A href=\"javascript:('"+folders+(1).text+"/"+"',1)\"><img src=\"images/\" border=0 >"+(1).text+"</A></td></tr>";
}
else
{
strshow+="<tr><td><a href=\"javascript:('"+(1).text+"')\" ><img src=\"images/\" border=0>"+(1).text+"</A></td></tr>";
}
}
strshow+="</table>"
}
else{
//Data is stacked
for(i=0;i<len;i++)
{ oItem = (i);
if((0).text=="folder")
{
arrff[i]="<A href=\"javascript:('"+folders+(1).text+"/"+"',1)\"><img src=\"images/\" border=0>"+(1).text+"</A>";
}
else
{
arrff[i]="<A href=\"javascript:('"+(1).text+"')\"><img src=\"images/\" border=0 height=12>"+(1).text+"</A>";
}
}
//Get the number of columns to be output
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>"
}
=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">Find range(<u>I</u>):</td>
<td width="214"><select name="select" size="1" onchange="javascript:userlist(,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/" width="16" height="15"></td>
<td width="28" align="left"><img src="images/" 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="" width=415 height=120 ></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">File name(<u>N</u>): </td>
<td width="254"><input type="text" size="34"></td>
<td><button onclick="javascript:return check()"> Open (<u>O</U>)</button></td>
</tr>
</FORM>
<tr>
<td align="right">File type(<u>T</u>):</td>
<td><select name="select2" class=s2>
<option>Streaming files (*.asf,*.wmv,*.wma)</option>
</select></td>
<td><input type="button" name="Submit" value=" Cancel " onclick="();"></td>
</tr>
</table></td>
</tr>
</table>
</BODY>
</HTML>
There is also a small file to define the style of displaying files and folders.
<!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>
When calling, you can use the following function to achieve the effect of selecting files on the server side with fake and real ones.
function selectfile()
{
var arr = showModalDialog("?temp="+(), "", "dialogWidth:453px; dialogHeight:252px; status:0;help:1");
if (arr != null)
{
return arr
}
}
<%
'written by Linzhang Chen ,2003-4-20
' Please indicate the source and retain this copyright information when reprinting
"<?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/"'Base folder path
newfolder=basefolder&folders
Set fso =("")
set f=((newfolder))
set sf=
for each fd in sf' returns the list of folders below the specified path
"<file>"&chr(13)
"<ftype>folder</ftype>"&chr(13)
"<fname>"&&"</fname>"&chr(13)
"</file>"&chr(13)
count=count+1
next
set sf=nothing
set ff=
for each fi in ff
fname=
if instr("asf,wma,wmv",lcase(mid(fname,instrrev(fname,".")+1)))>0 then' Set the file type that is allowed to be returned to prevent source code leakage
"<file>"&chr(13)
"<ftype>file</ftype>"&chr(13)
"<fname>"&fname&"</fname>"&chr(13)
"</file>"&chr(13)
count=count+1
end if
next
'If there is no file in this directory, send an empty element
if count=0 then
"<file>"&chr(13)
"<ftype>empty</ftype>"&chr(13)
"<fname>0</fname>"&chr(13)
"</file>"&chr(13)
end if
"</mediafile>"
set ff=nothing
set f=nothing
set fso=nothing
%>
The following is the client's JS kung fu ()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select a video file </TITLE>
<style>
td{font-size:9pt}
select{width:210}
.s2{width:250}
</style>
<SCRIPT LANGUAGE="javascript">
<!--
/*written by Linzhang Chen ,2003-4-20
Please indicate the source and retain this copyright information when reprinting */
//Preload pictures
var imgback = new Image();
= "images/";
var imgbackgray = new Image();
= "images/";
var imgfolder = new Image();
= "images/";
var imggrayfolder = new Image();
= "images/";
//History record array stack
var arrhistory=new Array();
var hisi=0;
// Used to determine the file name to be returned
function check()
{
if (=="")
{
alert("Please select file first");
return false;
}
else
{
=document.+;
();
}
}
//Get the contents of the XML file
function getuserlist(url)
{ var oXMLDoc = new ActiveXObject('MSXML');
= url;
var ooRoot=;
return ooRoot;
}
//When a file is selected, return this value to the text box
function addfile(txt)
{
=txt;
}
var first=1;//Define a global variable
function userlist(folders,ti)//list selected boxes
{document.=folders;
="The file is loading, please wait...";
var strshow="";
var timeoutid=null;
var newfolder="";
var arrfolder=new Array();
var arrff=new Array();
var blankstr="";
var oItem;
//Determine the historical status
hisi+=ti;
arrhistory[hisi]=folders;
if (hisi==0)
{
="<img src=\"images/\">";
}
else
{
="<img src=\"images/\" border=0 style=\"cursor:hand\" onclick=\"userlist('"+arrhistory[hisi-1]+"',-1)\" onmouseover=\"='images/arrow_over.gif'\" onmouseout=\"='images/'\">";
}
//Confirm the current folder
if (document.=="")
{
="<img src=\"images/\">"
}
else
{newsfolder=checkfolder(document.)
="<img src=\"images/\" border=0 style=\"cursor:hand\" onclick=\"userlist('"+newsfolder+"',1)\" onmouseover=\"='images/folder_over.gif'\" onmouseout=\"='images/'\">"
}
// Assign values to the drop-down box
=0;
newfolder=folders;
folderstr=""
var _obj=;
var _o=("Option");
_o.text="Select folder";
_o.value="";
_obj.add(_o);
if (newfolder!="")
{arrfolder=("/")
for(var i=0;i<-1;i++)
{blankstr+=" ";
folderstr+=arrfolder[i]+"/";
_o=("Option");
_o.text=blankstr+arrfolder[i];
_o.value=folderstr;
_obj.add(_o);
}
}
[-1].selected=true;
url="?folder="+folders;
oRoot=getuserlist(url)
strshow="<table class=file cellspacing=0 cellpadding=0>";
len=;
if (len==1)
{oItem = (0);
if((0).text=="empty")
strshow="No files and folders";
else
{
if((0).text=="folder")
{
strshow+="<tr><td><A href=\"javascript:('"+folders+(1).text+"/"+"',1)\"><img src=\"images/\" border=0 >"+(1).text+"</A></td></tr>";
}
else
{
strshow+="<tr><td><a href=\"javascript:('"+(1).text+"')\" ><img src=\"images/\" border=0>"+(1).text+"</A></td></tr>";
}
}
strshow+="</table>"
}
else{
//Data is stacked
for(i=0;i<len;i++)
{ oItem = (i);
if((0).text=="folder")
{
arrff[i]="<A href=\"javascript:('"+folders+(1).text+"/"+"',1)\"><img src=\"images/\" border=0>"+(1).text+"</A>";
}
else
{
arrff[i]="<A href=\"javascript:('"+(1).text+"')\"><img src=\"images/\" border=0 height=12>"+(1).text+"</A>";
}
}
//Get the number of columns to be output
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>"
}
=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">Find range(<u>I</u>):</td>
<td width="214"><select name="select" size="1" onchange="javascript:userlist(,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/" width="16" height="15"></td>
<td width="28" align="left"><img src="images/" 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="" width=415 height=120 ></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">File name(<u>N</u>): </td>
<td width="254"><input type="text" size="34"></td>
<td><button onclick="javascript:return check()"> Open (<u>O</U>)</button></td>
</tr>
</FORM>
<tr>
<td align="right">File type(<u>T</u>):</td>
<td><select name="select2" class=s2>
<option>Streaming files (*.asf,*.wmv,*.wma)</option>
</select></td>
<td><input type="button" name="Submit" value=" Cancel " onclick="();"></td>
</tr>
</table></td>
</tr>
</table>
</BODY>
</HTML>
There is also a small file to define the style of displaying files and folders.
<!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>
When calling, you can use the following function to achieve the effect of selecting files on the server side with fake and real ones.
function selectfile()
{
var arr = showModalDialog("?temp="+(), "", "dialogWidth:453px; dialogHeight:252px; status:0;help:1");
if (arr != null)
{
return arr
}
}