用XML+FSO+JS實現服務器端文件的選擇

2019-11-18 19:54:49

字體：大中小

來源：轉載

供稿：網友

//預裝載圖片
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>
</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:clzwin@sina.com