|
小弟最近用C#寫了一個ASP.NET小應(yīng)用,使用了一些XML和XSL技術(shù),
本應(yīng)用主要是用ASP.NET應(yīng)用來模擬一個Windows資源管理器 一個窗體左邊為動態(tài)加載的文件夾樹狀列表,而右邊能查看某些類型的文件的內(nèi)容 
本網(wǎng)戰(zhàn)使用了一些圖片,請在相冊中查找
<html> <head> <TITLE>基于Web的文件查看器</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <frameset cols="237,767" rows="*"> <frame src="treeview.aspx"> <frame name="frameview" src="說明.txt"> </frameset> <noframes> <body bgcolor="#FFFFFF" text="#000000"> </body> </noframes> </html>文件 說明.txt 內(nèi)容 基于Web 的文件瀏覽查看器
本系統(tǒng)為一個ASP.NET應(yīng)用程序,使用C#語言開發(fā)
本系統(tǒng)在一個瀏覽器/服務(wù)器模式下模仿Windows資源管理器的文件系統(tǒng)樹狀列表
并提供一定類型的文件的查看功能
本系統(tǒng)不是數(shù)據(jù)庫應(yīng)用系統(tǒng),因此不需要配置任何數(shù)據(jù)庫
將所有的文件拷貝到一個Web服務(wù)器上的某個虛擬目錄即可運(yùn)行
但服務(wù)器必須安裝 IIS 及 Microsoft .NET Framwork 1.1簡體中文版
本系統(tǒng)默認(rèn)根目錄為 D:\ ,但可以在系統(tǒng)運(yùn)行時修改根目錄,也可進(jìn)入fileview.aspx.cs
中第19行修改默認(rèn)根目錄然后重新編譯即可
本系統(tǒng)主頁面為 index.htm
本系統(tǒng)為一個ASP.NET應(yīng)用,因此該程序運(yùn)行在 ASPNET 用戶賬號下,該賬號權(quán)限一般比較低
因此若本系統(tǒng)不能查看某個文件目錄,此時需要進(jìn)入相關(guān)的系統(tǒng)管理工具設(shè)置ASPNET的權(quán)限
客戶端建議安裝 IE6.0及其以上版本
************** 版權(quán)聲明 *****************************************************
你可以任意參考修改和引用所有的代碼,可將所有的代碼
不受限制的使用于任意性質(zhì)的系統(tǒng)中.
但在使用時請尊重知識產(chǎn)權(quán),修改的時候望手下留情,
請不要竄改或刪除可憐巴巴這么一點(diǎn)的知識產(chǎn)權(quán)聲明
以尊重漫漫長夜辛苦敲鍵盤的人們的勞動成果
南京 袁永福 2004-8-8
yyf9989@hotmail.com
*************** 文件列表 ****************************************************
bmp.bmp gif.bmp htm.bmp html.bmp
jpeg.bmp jpg.bmp txt.bmp new.bmp
用于在樹狀列表中表示文件類型的圖標(biāo)BMP文件,其中文件名就是
適于該圖標(biāo)的文件的擴(kuò)展名,默認(rèn)為 new.bmp
你可以自己添加相應(yīng)的文件類型的BMP, 所有的這些BMP大小都是 16*16象素
child.gif close.bmp collapse.gif expend.gif
open.bmp line.gif lastchild.gif
用于在樹狀列表中表現(xiàn)樹狀結(jié)構(gòu)的圖片
index.htm 系統(tǒng)主頁面,為一個分為左右兩個框架的靜態(tài)HTML頁面
fileview.aspx 用于獲得文件列表信息及文件信息和內(nèi)容的ASP.NET頁面
treeview.aspx 用于維護(hù)樹狀列表的ASP.NET頁面
htmlcontent.xml 為一個XSLT文檔,用于根據(jù)文件信息來生成顯示該文件內(nèi)容的HTML代碼
文件 treeview.aspx 內(nèi)容
<%@ Page language="c#" AutoEventWireup="false" Inherits="fileview.treeview" %>
<!-----------------------------------------------------------------------------
基于Web的文件查看器之文件樹狀列表
本頁面綜合使用了 ASP.NET , XML ,XSLT 和 DHTML技術(shù)
本頁面用于維護(hù)一個文件樹狀列表,該樹狀列表模仿了Windows資源管理器的文件樹狀列表
你可以任意參考修改和引用所有的代碼,可將所有的代碼不受限制的使用于任意性質(zhì)的系統(tǒng)中.
但在使用時請尊重知識產(chǎn)權(quán),修改的時候望手下留情,
請不要竄改或刪除可憐巴巴這么一點(diǎn)的知識產(chǎn)權(quán)聲明
南京 袁永福 2004-8-8
yyf9989@hotmail.com
------------------------------------------------------------------------------>
<%
string strPath = this.Request.Form["baseurl"] ;
if(strPath == null || strPath.Trim().Length == 0 )
strPath = fileview.FileView.BasePath ; // 顯示當(dāng)前根目錄
strPath = strPath.Trim();
if(strPath.EndsWith("\\")==false)
strPath = strPath + "\\";
if(System.IO.Directory.Exists(strPath))
fileview.FileView.BasePath = strPath ;
%>
<HTML>
<HEAD>
<title>動態(tài)的XML樹狀列表</title>
<style>
body{ font-family: "宋體"; font-size: 12px}
.TreeNode { FONT-SIZE: 12px; CURSOR: hand }
.FocusNode { BORDER-RIGHT: #ff0000 1px solid;
BORDER-TOP: #ff0000 1px solid; FONT-SIZE: 12px; MARGIN-BOTTOM: -2px;
BORDER-LEFT: #ff0000 1px solid; CURSOR: hand; COLOR: #ffffff;
BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #000099; TEXT-ALIGN: left }
</style>
</HEAD>
<body leftmargin="1" topmargin="1">
<form id="Form1" method="post">
<div>
<span id="maintree" childlist="fileview.aspx?type=list">根節(jié)點(diǎn)
<input type="text" name="baseurl" style="width:72" value="<%= strPath%>" />
<input type="submit" value="刷新" /></span>
</div>
</form>
<!--
XML數(shù)據(jù)島,在此定義用于進(jìn)行匹配的XSLT文檔,
該XSLT文檔用于支持動態(tài)的生成樹狀列表
-->
<xml id="treexsl">
<xsl:stylesheet xmlns:xsl="http://www./1999/XSL/Transform" version="1.0">
<xsl:output method="xml" />
<xsl:template match="/*">
<xsl:variable name="baseurl">
<xsl:value-of select="@baseurl" />
</xsl:variable>
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="createdtable">
<xsl:for-each select="*">
<!-- 樹狀列表是按照節(jié)點(diǎn)文本進(jìn)行排序的 -->
<xsl:sort select="concat(@file , @text)" />
<!-- 計算當(dāng)前節(jié)點(diǎn)的代號 -->
<xsl:variable name="nodeid">
<xsl:choose>
<xsl:when test="@id!=‘‘">
<xsl:value-of select="concat(‘ID‘ , @id)" />
</xsl:when>
<xsl:when test="boolean(‘true‘)">
<xsl:value-of select="translate(name(),‘.‘,‘_‘)" />
</xsl:when>
</xsl:choose>
</xsl:variable>
<tr>
<td valign="top" align="left" width="16">
<xsl:choose>
<xsl:when test="@childlist != ‘‘">
<xsl:if test="position()!=last()">
<xsl:attribute name="background">line.gif</xsl:attribute>
</xsl:if>
<img src="collapse.gif" expend="0">
<xsl:attribute name="id">
<xsl:value-of select="concat($nodeid,‘expend‘)" />
</xsl:attribute>
<xsl:attribute name="onclick">ExpendNodeByID(‘<xsl:value-of select="$nodeid" />‘);</xsl:attribute>
</img>
</xsl:when>
<xsl:when test="boolean(‘true‘)">
<xsl:if test="position()!=last()">
<img src="child.gif" />
</xsl:if>
<xsl:if test="position()=last()">
<img src="lastchild.gif" />
</xsl:if>
</xsl:when>
</xsl:choose>
</td>
<td valign="top" nowrap="1">
<!--
用于生成樹狀列表的圖標(biāo)HTML代碼
-->
<img align="absmiddle" onclick="ExpendNode(this.nextSibling)" width="16" height="16">
<xsl:attribute name="id">
<xsl:value-of select="concat($nodeid,‘icon‘)" />
</xsl:attribute>
<xsl:attribute name="src">
<xsl:choose>
<xsl:when test="@img!=‘‘">
<xsl:value-of select="@img" />
</xsl:when>
<xsl:when test="@childlist != ‘‘">close.bmp</xsl:when>
<xsl:when test="boolean(‘true‘)">default.bmp</xsl:when>
</xsl:choose>
</xsl:attribute>
</img>
<!-- 生成樹狀列表節(jié)點(diǎn)的文本 -->
<a class="TreeNode" valign="top" onclick="ExpendNode(this)" target="frameview">
<xsl:attribute name="id">
<xsl:value-of select="$nodeid" />
</xsl:attribute>
<xsl:if test="@href != ‘‘">
<xsl:attribute name="href">
<xsl:value-of select="concat($baseurl , @href)" />
</xsl:attribute>
</xsl:if>
<xsl:if test="@childlist!=‘‘">
<xsl:attribute name="childlist">
<xsl:value-of select="@childlist" />
</xsl:attribute>
<xsl:attribute name="href">
<xsl:value-of select="concat($baseurl , @childlist)" />
</xsl:attribute>
</xsl:if>
<xsl:value-of select="concat( ‘ ‘ ,@text)" />
</a>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
</xml>
<script language="javascript">
<!--
var CurrentTreeNode ; // 定義樹狀列表的當(dāng)前節(jié)點(diǎn)對象
var intIDCount = 1234; // 定義一個ID號初始值
var CurrentLoadingID = "";
// 初始化XSLT模板
var xslDoc = new ActiveXObject("MSXML.DOMDocument");
xslDoc.async = false;
xslDoc.load (treexsl.XMLDocument);
var resultDoc = new ActiveXObject("MSXML.DOMDocument");
resultDoc.onreadystatechange = XMLStateChange ;
resultDoc.async = true;
function XMLStateChange()
{
//window.status = resultDoc.readyState ;
if(resultDoc.readyState == 4 )
{
var objLabel = document.getElementById("loadflag" + intIDCount) ;
if(resultDoc.parseError.errorCode != 0)
objLabel.innerText = "加載錯誤:" + resultDoc.parseError.reason ;
else
{
var myObj = document.getElementById(CurrentLoadingID + "expend");// 獲得節(jié)點(diǎn)的展開點(diǎn)圖片對象
var myIcon = document.getElementById(CurrentLoadingID + "icon"); // 獲得節(jié)點(diǎn)的圖標(biāo)圖片對象
var MainObj = document.getElementById(CurrentLoadingID); // 獲得節(jié)點(diǎn)的文本對象
var myTable ;
var strHTML = resultDoc.transformNode(xslDoc) ;
window.status = "加載完畢,正在生成子節(jié)點(diǎn)列表..." ;
MainObj.insertAdjacentHTML("afterEnd", strHTML );
MainObj.removeAttribute("childlist");
// 獲得剛剛加載的子節(jié)點(diǎn)表格對象并進(jìn)行初始化
myTable = document.getElementById("createdtable");
objLabel.style.display="none";
if(myTable != null)
{
myTable.style.display = "";
myTable.id = CurrentLoadingID + "table";
}
intIDCount ++ ;
//myTable.style.display="none";
if(myObj != null)
{
myTable.style.display="";
myObj.expend = "1";
myObj.src = "expend.gif";
myIcon.src = "open.bmp";
myIcon.align = "absmiddle";
}
window.status = "";
}
}
}
// 展開一個樹狀列表節(jié)點(diǎn)并設(shè)置為當(dāng)前節(jié)點(diǎn)
function ExpendNode(obj)
{
if( CurrentTreeNode != obj && CurrentTreeNode != null)
{
CurrentTreeNode.className = "TreeNode";
}
CurrentTreeNode = obj;
CurrentTreeNode.className = "FocusNode";
window.status = obj.innerText ;
ExpendNodeByID(obj.id);
}
// 展開指定編號的樹狀列表的節(jié)點(diǎn),若該節(jié)點(diǎn)的子節(jié)點(diǎn)未加載則加載之
function ExpendNodeByID(strID)
{
var myObj = document.getElementById(strID + "expend"); // 獲得節(jié)點(diǎn)的展開點(diǎn)圖片對象
var myIcon = document.getElementById(strID + "icon"); // 獲得節(jié)點(diǎn)的圖標(biāo)圖片對象
var MainObj = document.getElementById(strID); // 獲得節(jié)點(diǎn)的文本對象
var myTable ;
myTable = document.getElementById(strID + "table"); // 獲得子節(jié)點(diǎn)表格
if(MainObj != null && MainObj.childlist != null && myTable == null)
{
// 加載子節(jié)點(diǎn)
MainObj.insertAdjacentHTML("afterEnd",
"<div id=‘loadflag" + intIDCount + "‘> 正在加載子節(jié)點(diǎn)...</div>");
window.status = "正在加載 " + MainObj.innerText + " 的子節(jié)點(diǎn)...";
CurrentLoadingID = strID;
resultDoc.load(MainObj.childlist);
return ;
}
// 展開或收縮子節(jié)點(diǎn)
if(MainObj != null && myObj != null && myIcon != null && myTable != null )
{
if(myObj.expend=="1")
{
myTable.style.display="none";
myObj.expend = "0";
myObj.src = "collapse.gif";
myIcon.src = "close.bmp";
myIcon.align = "absmiddle";
}
else
{
myTable.style.display="";
myObj.expend = "1";
myObj.src = "expend.gif";
myIcon.src = "open.bmp";
myIcon.align = "absmiddle";
}
window.status = "文件夾:" + MainObj.innerText + " 共有子節(jié)點(diǎn) " + myTable.rows.length + " 個";
}
}
// 頁面加載的時候加載根節(jié)點(diǎn)
ExpendNodeByID("maintree");
//document.getElementById("maintree").innerText = "根節(jié)點(diǎn)";
-->
</script>
</body>
</HTML>
文件 fileview.aspx 該頁面的HTML代碼只有 <%@ Page language="c#" Codebehind="fileview.aspx.cs" AutoEventWireup="false" Inherits="fileview.FileView" %> 它的CS源代碼為 文件 htmlcontent.xml 的內(nèi)容 <?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet xmlns:xsl="http://www./1999/XSL/Transform" version="1.0">
<!--
用于根據(jù)描述單個文件信息的XML文件進(jìn)行處理,生成實(shí)際顯示該文檔的HTML頁面代碼
你可以任意參考修改和引用所有的代碼,可將所有的代碼不受限制的使用于任意性質(zhì)的系統(tǒng)中.
但在使用時請尊重知識產(chǎn)權(quán),修改的時候望手下留情,
請不要竄改或刪除可憐巴巴這么一點(diǎn)的知識產(chǎn)權(quán)聲明
南京 袁永福 2004-8-8
yyf9989@hotmail.com
-->
<xsl:output method="html" />
<xsl:template match="/*">
<xsl:choose>
<xsl:when test="name(.) = ‘filelist‘ ">
<html>
<head>
<title>文件列表</title>
</head>
<body leftmargin="1" topmargin="1">
<xsl:value-of select="concat(‘文件夾‘ , @text,‘ 的子項(xiàng)目列表 共‘,count(*),‘個子項(xiàng)目‘)" />
[<a href="fileview.aspx?viewtype=list">設(shè)置列表視圖模式</a>]
[<a href="fileview.aspx?viewtype=preview">設(shè)置預(yù)覽視圖模式</a>]
<br />
<xsl:if test="@viewtype=‘preview‘">
<xsl:for-each select="*[@imgfile=‘1‘]">
<a>
<xsl:attribute name="href">
<xsl:value-of select="@href" />
</xsl:attribute>
<img>
<xsl:attribute name="src">
<xsl:value-of select="concat(@href,‘&preview=1‘)" />
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="@text" />
</xsl:attribute>
</img>
</a>
</xsl:for-each>
</xsl:if>
<xsl:if test="@viewtype=‘list‘">
<table width="100%" cellspacing="0" rules="all" bordercolor="#CC0066" border="1" id="lvwTable"
style="border-color:#CC0066;width:100%;border-collapse:collapse;Z-INDEX: 101; LEFT: 40px;font-family: 宋體; font-size: 12px">
<tr style="background-color:#CCCCFF;">
<td>文件名 </td>
<td>大小</td>
<td>類型</td>
<td>修改時間</td>
</tr>
<xsl:for-each select="*">
<!-- 計算當(dāng)前節(jié)點(diǎn)的代號 -->
<xsl:variable name="nodeid">
<xsl:choose>
<xsl:when test="@id!=‘‘">
<xsl:value-of select="concat(‘ID‘ , @id)" />
</xsl:when>
<xsl:when test="boolean(‘true‘)">
<xsl:value-of select="translate(name(),‘.‘,‘_‘)" />
</xsl:when>
</xsl:choose>
</xsl:variable>
<tr>
<td>
<img id="Img1" align="absmiddle" width="16" height="16">
<xsl:attribute name="src">
<xsl:choose>
<xsl:when test="@img!=‘‘">
<xsl:value-of select="@img" />
</xsl:when>
<xsl:when test="@childlist != ‘‘">close.bmp</xsl:when>
<xsl:when test="boolean(‘true‘)">default.bmp</xsl:when>
</xsl:choose>
</xsl:attribute>
</img>
<!-- 生成樹狀列表節(jié)點(diǎn)的文本 -->
<a class="TreeNode" valign="top">
<xsl:if test="@href != ‘‘">
<xsl:attribute name="href">
<xsl:value-of select="@href" />
</xsl:attribute>
</xsl:if>
<xsl:value-of select="concat( ‘ ‘ ,@text)" />
</a>
</td>
<td>
<xsl:value-of select="@size" />
</td>
<td>
<xsl:value-of select="@type" />
</td>
<td>
<xsl:value-of select="@accesstime" />
</td>
</tr>
</xsl:for-each>
</table>
</xsl:if>
</body>
</html>
</xsl:when>
<xsl:when test="@type=‘swf‘">
<!-- Flash 動畫,需要調(diào)用Flash播放器 -->
<html>
<head></head>
<body>
<div>
本文檔為一個Flash動畫,將使用Falsh動畫播放器播放
<br />請確認(rèn)你的計算機(jī)系統(tǒng)安裝了Flash動畫播放器
</div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0">
<param name="movie">
<xsl:attribute name="value">
<xsl:value-of select="@url" />
</xsl:attribute>
</param>
<param name="quality" value="high" />
<embed quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash">
<xsl:attribute name="src">
<xsl:value-of select="@url" />
</xsl:attribute>
</embed>
</object>
</body>
</html>
</xsl:when>
<!-- 圖片 -->
<xsl:when test="@type=‘jpg‘ or @type=‘jpeg‘ or @type=‘bmp‘ or @type=‘png‘ or @type=‘gif‘ or @type=‘icon‘ or @type=‘ico‘ ">
<html>
<head></head>
<body leftmargin="1" topmargin="1" bgcolor="#000000">
<div align="center">
<img border="1" align="center" style="border-color: #FF0000">
<xsl:attribute name="src">
<xsl:value-of select="@url" />
</xsl:attribute>
</img>
</div>
</body>
</html>
</xsl:when>
<!--
視頻或音頻文檔,需要調(diào)用Windows媒體播放器
以下代碼在安裝了Windows Media Player 9 的Windows2000系統(tǒng)上調(diào)試通過
-->
<!--xsl:when test=" @type=‘mpg‘ or @type=‘mpge‘ or @type=‘mp3‘ or @type=‘a(chǎn)vi‘ or @type=‘a(chǎn)sf‘ or @type=‘wmv‘ or @type=‘mpga‘ or @type=‘wma‘ "-->
<xsl:when test="@type!=‘‘ and contains(‘.cda.aif.aifc.aiff.asf.asx.wax.wm.wma.wmd.wmp.wmv.wmx.wpl.wvx.avi.wav.wmz.mpga.mpeg.mpg.m1v.mp2.mpa.mpemp2v.mpv2.mid.midi.rmi.au.mp3.m3u.vob‘, concat(‘.‘,@type))">
<html>
<head></head>
<body>
<div>
當(dāng)前文檔為音頻或視頻文件,將使用Windows Media Player 來播放
<br />在此使用Windows Media Player 9來播放,
<br />請確保你的計算機(jī)系統(tǒng)上安裝了Windows Media Player 9
<br />目前支持的文件擴(kuò)展名包括
<br /> .cda .aif .aifc .aiff .asf .asx .wax .wm .wma .wmd .wmp .wmv .wmx
<br /> .wpl .wvx .avi .wav .wmz .mpga .mpeg .mpg .m1v .mp2 .mpa .mpemp2v
<br /> .mpv2 .mid .midi .rmi .au .mp3 .m3u .vob
</div>
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="WindowsMediaPlayer1" width="419"
height="242">
<param name="URL">
<xsl:attribute name="value">
<xsl:value-of select="@url" />
</xsl:attribute>
</param>
</object>
</body>
</html>
</xsl:when>
<!--xsl:when test="@type=‘txt‘">
<html>
<head>
</head>
<body>
<pre id="txtpre">
<script language="vbscript">
dim txtdata
set txtdata = CreateObject("Microsoft.XMLHTTP")
txtdata.open "GET","<xsl:value-of select="@url" />" ,false
txtdata.send ""
alert txtdata.responsetext
document.getElementById("txtpre").innerHTML = txtdata.responseText
set txtdata = nothing
</script>
</pre>
</body>
</html>
</xsl:when-->
<!-- 對其他所有的文件使用javascript腳本進(jìn)行頁面重定向 -->
<xsl:when test="boolean(‘true‘)">
<script language="javascript">
document.location = "<xsl:value-of select="@url" />" ;
</script>
</xsl:when>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>
|
|
|
