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

jiutuo31731

jiutuo31731

2016-02-19 19:01

下面图老师小编跟大家分享xml教程:用XML+FSO+JS实现服务器端文件的选择,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

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

(本文来源于图老师网站,更多请访问http://m.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
 %

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  下面就是客户端的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
  调用的时候用以下函数,就可以实现以假乱真的服务器端选择文件的效果

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

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

展开更多 50%)
分享

猜你喜欢

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

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

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

ASP
用XML+FSO+JS实现服务器端文件的选择

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用XML+FSO+JS实现服务器端文件的选择效果

Web开发
用XML+FSO+JS实现服务器端文件的选择效果

js装载xml文件然后发向服务器的实现代码

Web开发
js装载xml文件然后发向服务器的实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用ICallbackEventHandler实现客户端与服务器端异步

电脑网络
用ICallbackEventHandler实现客户端与服务器端异步

XML入门指南(16)XML服务器

Web开发
XML入门指南(16)XML服务器

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

XML开发入门基础:XML 树结构

XML开发入门基础:XML 树结构

Excel打开csv格式文件并生成图形功能实现方案

Excel打开csv格式文件并生成图形功能实现方案
下拉加载更多内容 ↓