328
Jquery.Treeview+Jquery UI製作Web文件預覽
效果圖：
前台Html:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_26.QingShan.WebFileViewer._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery.Treeview+Jquery UI製作Web文件預覽</title>
<%--JS--%>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"> </script>
<script src="Scripts/jquery.treeview/jquery.cookie.js" type="text/javascript"> </script>
<script src="Scripts/jquery.treeview/jquery.treeview.js" type="text/javascript"> </script>
<script src="Scripts/jquery-ui-1.10.3/jquery-ui-1.10.3.min.js" type="text/javascript"> </script>
<%--CSS--%>
<link href="Scripts/jquery-ui-1.10.3/css/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="Scripts/jquery.treeview/jquery.treeview.css" rel="stylesheet"></link>
<link href="Style/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form runat="server">
<div >
<p>
文件預覽</p>
<div >
<ul >
<%= FileTreeHtml %></ul>
<script type="text/javascript">
$(function() {
//樹形文件目錄
$(".filetree").treeview();
//顯示ToolTips
$(document).tooltip({
items: ".file",
track: true,
content: function() {
var element = $(this);
var name = element.attr("name");
var img = element.attr("img");
if (img != "") {
return "<img class='toolTips' alt='" + name + "' src='" + img + "'>";
}
return "";
}
});
});
</script>
</div>
</div>
</form>
</body>
</html>
後台代碼：
using System;
using System.IO;
using System.Text;
using System.Web;
using System.Web.UI;
namespace _26.QingShan.WebFileViewer
{
public partial class _Default : Page
{
protected string FileTreeHtml { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var directory = new DirectoryInfo(HttpContext.Current.Server.MapPath("~/FileLibrary"));
if (Directory.Exists(directory.FullName))
{
FileTreeHtml = FileTreeHelper.GetGuideTree(new StringBuilder(), directory.FullName,
directory.FullName);
}
}
}
}
}
生成樹形導航Html的類：
using System;
using System.IO;
using System.Text;
using System.Web;
namespace Whir.WebSite.JavascriptDemos
{
/// <summary>
/// 樹形文件夾Html內容生成類
/// </summary>
public class FileTreeHelper
{
/// <summary>
/// 生成樹形文件Html
/// </summary>
/// <param name="builder">用於存放拚接的Html，由於是遞歸拚接，調用方法時，傳入空的StringBuilder即可</param>
/// <param name="path">要顯示的服務器端文件夾路徑（物理路徑）</param>
/// <param name="replacePath">要替換掉的路徑部分</param>
/// <returns></returns>
public static string GetGuideTree(StringBuilder builder, string path, string replacePath)
{
var currentDir = new DirectoryInfo(path);
DirectoryInfo[] subDirs = currentDir.GetDirectories();
if (subDirs.Length > 0)
{
builder.AppendFormat("<li><span class='folder' path='{0}'>{1}</span>" + Environment.NewLine,
currentDir.FullName.Replace(replacePath, ""), currentDir.Name);
builder.Append(" <ul>" + Environment.NewLine);
foreach (DirectoryInfo dir in subDirs)
{
GetGuideTree(builder, dir.FullName, replacePath);
}
FileInfo[] files = currentDir.GetFiles();
if (files.Length > 0)
{
foreach (FileInfo file in files)
{
string previewUrl = file.FullName.IsImage()
? GetFileWebUrl(
file.FullName.Replace(HttpContext.Current.Server.MapPath("~/"), ""))
: string.Empty;
builder.AppendFormat("<li><span class='file' name='{0}' img='{1}' path='{2}'>{0}</span>" + Environment.NewLine, file.Name,
previewUrl, file.FullName.Replace(replacePath, ""));
}
}
builder.Append(" </ul>" + Environment.NewLine);
builder.Append("</li>" + Environment.NewLine);
}
else
{
builder.AppendFormat("<li class='closed'><span class='folder' path='{0}'>{1}</span>" + Environment.NewLine,
currentDir.FullName.Replace(replacePath, ""), currentDir.Name);
}
return builder.ToString();
}
public static string GetFileWebUrl(string filePath)
{
if (filePath.IsEmpty())
{
return string.Empty;
}
filePath = filePath.Replace("\\", "/");
if (filePath.StartsWith("/"))
{
filePath = filePath.TrimStart('/');
}
return VirtualPathUtility.AppendTrailingSlash(HttpContext.Current.Request.ApplicationPath) + filePath;
}
}
}
完整Demo下載 https://download.csdn.net/detail/a497785609/6926313
最後更新：2017-04-03 12:55:04