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

(0)

相关推荐

  • 用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=req

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

    首先在服务器端先创建一个程序可以生成XML文件,以返回客户端,(getfolder.asp) <% 'written by Linzhang Chen ,2003-4-20 ' 转载请注明出处和保留此版权信息 response.write "<?xml version=""1.0"" encoding=""GB2312""?>"&chr(13) response.write &qu

  • JS多个矩形块选择效果代码(模拟CS结构)

    "> 大屏屏幕 /css/font.css" rel="stylesheet" type="text/css" /> var canChange = 1; var candraw = 1; function main_mouseup() { candraw = 0; } function init() { var aDivs = document.getElementsByTagName("div"); for (

  • 使用js原生实现年份轮播选择效果实例

    前言 用js实现一个年份轮换选择效果.废话不多说,看图: 一.思路是什么? 布局: 左右箭头使用实体字符 < 和 > 年份5个span.使用用flex布局横向排列. js逻辑:(注:年份数据为number数组) a> . 默认展示年份数据前5个. b>. firstIndex记录要显示的5个年份的起始索引.点击右侧箭头+1,直到firstIndex+5 刚好等于年份数组长度,不在递增.点击左侧箭头-1,直到firstIndex为0,不在递减.初始值为0. c>.selecte

  • js读取json文件片段中的数据实例

    在html中利用js读取动态网站从服务器端返回的数据进行显示 1.js.html 页面 需要引入 执行jquery的js文件 <HTML> <HEAD> <META name=Generator content=EditPlus> <META name=Author content=""> <META name=Keywords content=""> <META name=Description c

  • js 获取本地文件及目录的方法(推荐)

    Javascript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和文件夹进行读.写和删除,就象在VB.VC等高级语言中经常做的工作一样.怎么样,你是否需要了解这方面的知识?那就请跟我来,本文将详细描述如何使用Javascript语言进行文件操作. 一.功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.在详

  • js 上传文件预览的简单实例

    1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div id="test-image-preview" style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat

  • ASP+FSO生成的网页文件默认编码格式以及转换成UTF-8编码方法

    具体特征如下: 1.通过模板实现俄文正常. 2.通过后台数据库生成的静态俄文信息,后台显示正常, 前台乱码. 3.英文正常. 和该主题相关的类似或不同表达 FSO写UTF-8编码文件 FSO怎么才能生成utf-8编码的文件 FSO生成的文件默认是什么编码格式 如何转换成UTF-8编码 FSO生成静态网页的问题 ASP中用FSO生成文件代码如下 复制代码 代码如下: function createfile(sfilename,scontent) set fso=server.CreateObjec

  • JS基于FileSaver.js插件实现文件保存功能示例 原创

    本文实例讲述了JS基于FileSaver.js插件实现文件保存功能.分享给大家供大家参考,具体如下: 这里介绍一款js插件用法非常简单,先来看看FileSaver.js插件源码: 复制代码 代码如下: /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */ var saveAs=saveAs||function(e){"use strict";if(typeof naviga

  • JS+Struts2多文件上传实例详解

    本文实例为大家分享了JS Struts2多文件上传的具体代码,供大家参考,具体内容如下 1.JSP页面: JS控制增加删除多个上传文件框,代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C

随机推荐