首页 > 开发 > PHP > 正文

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

2024-05-04 22:56:54
字体:
来源:转载
供稿:网友
首先在服务器端先创建一个程序可以生成xml文件,以返回客户端,(getfolder.asp)
<%
'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 = "http://www.163design.net/p/a/images/arrow.gif";
var imgbackgray = new image();
imgbackgray.src = "images/grayarrow.gif";
var imgfolder = new image();
imgfolder.src = "http://www.163design.net/p/a/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=http://www.163design.net/"images/grayarrow.gif/">";
}
else
{
arrow.innerhtml="<img src=http://www.163design.net/"http://www.163design.net/p/a/images/arrow.gif/" border=0 style=/"cursor:hand/" onclick=/"userlist('"+arrhistory[hisi-1]+"',-1)/" onmouseover=/"this.src='http://www.163design.net/p/a/images/arrow_over.gif'/" onmouseout=/"this.src='http://www.163design.net/p/a/images/arrow.gif'/">";
}
//确定当前的文件夹
if (document.f1.folder.value=="")
{
folderid.innerhtml="<img src=http://www.163design.net/"images/grayfolder.gif/">"
}
else
{newsfolder=checkfolder(document.f1.folder.value)
folderid.innerhtml="<img src=http://www.163design.net/"http://www.163design.net/p/a/images/folder.gif/" border=0 style=/"cursor:hand/" onclick=/"userlist('"+newsfolder+"',1)/" onmouseover=/"this.src='http://www.163design.net/p/a/images/folder_over.gif'/" onmouseout=/"this.src='http://www.163design.net/p/a/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=http://www.163design.net/"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=http://www.163design.net/"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=http://www.163design.net/"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=http://www.163design.net/"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>&nbsp;</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=http://www.163design.net/p/a/"images/md.gif" width="16" height="15"></td>
<td width="28" align="left"><img src=http://www.163design.net/p/a/"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">&nbsp;</td>
<td >
<iframe src="blank.htm" width=415 height=120 id="filebox"></iframe></td>
<td width="13">&nbsp;</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>):&nbsp;&nbsp;</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
}
}
该函数最后返回的是选中的文件名,函数里面所使用的几张图片大家就自已从文件选择框上抓了:)
估计在使用过程中可能还会遇到各种未知的bug欢迎大家和我来交流:e_mail:[email protected]

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表