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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 id="form1" runat="server">
<div class="main">
<p>
文件预览</p>
<div class="mainContent">
<ul id="fileList" class="filetree">
<%= 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下载http://download.csdn.net/detail/a497785609/6926313
Jquery.Treeview+Jquery UI制作Web文件预览的更多相关文章
- Web方式预览Office/Word/Excel/pdf文件解决方案
最近在做项目时需要在Web端预览一些Office文件,经过在万能的互联网上一番搜索确定并解决了. 虽然其中碰到的一些问题已经通过搜索和自己研究解决了,但是觉得有必要将整个过程记录下来,以方便自己以后查 ...
- odoo13之文件预览widget/模块
本文示例代码可查看github仓库:odoo13_file_preview 文件预览效果图展示 效果描述: 1.当点击图片或者文件时展开图片. 2.当点击关闭按钮时关闭图片预览. 3.当点击下载按钮时 ...
- Java实现web在线预览office文档与pdf文档实例
https://yq.aliyun.com/ziliao/1768?spm=5176.8246799.blogcont.24.1PxYoX 摘要: 本文讲的是Java实现web在线预览office文档 ...
- Qt SD卡 文件系统挂载、文件预览
/********************************************************************************** * Qt SD卡 文件系统挂载. ...
- java 文件转成pdf文件 预览
一.前端代码 //预览功能 preview: function () { //判断选中状态 var ids =""; var num = 0; $(".checkbox& ...
- java实现office文件预览
不知觉就过了这个久了,继上篇java实现文件上传下载后,今天给大家分享一篇java实现的对office文件预览功能. 相信大家在平常的项目中会遇到需要对文件实现预览功能,这里不用下载节省很多事.大家请 ...
- COS控制台进阶 - 文件预览和在线编辑
导语 | COS控制台新上线了文件预览功能,用户可在控制台内直接预览.编辑文件内容. 前不久,微软发布了 vscode for web 的公告,是基于web的在线代码编辑器,无需下载安装可以直接在we ...
- Atitit.office word excel ppt pdf 的web在线预览方案与html转换方案 attilax 总结
Atitit.office word excel ppt pdf 的web在线预览方案与html转换方案 attilax 总结 1. office word excel pdf 的web预览要求 ...
- [Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图，Ay制作,AyWindow强势预览]
原文:[Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图,Ay制作,AyWindow强势预览] 我的文章一定要做到对读者负责,否则就是失败的文章 -- ...
随机推荐
- java读写锁实现数据同步访问
锁机制最大的改进之一就是ReadWriteLock接口和它的唯一实现类ReentrantReadWriteLock.这个类有两个锁,一个是读操作锁,另一个是写操作锁.使用读操作锁时可以允许多个线程同时 ...
- C#启动外部程序以及等待外部程序关闭的几种方法
1. 启动外部程序,不等待其退出. 2. 启动外部程序,等待其退出. 3. 启动外部程序,无限等待其退出. 4. 启动外部程序,通过事件监视其退出. // using System.Diagnosti ...
- JS中实现字符串和数组的相互转化
早上起来看了一道js的面试题,是这样描述的:利用var s1=prompt("请输入任意的字符串","")可以获取用户输入 的字符串,试编程将用户输入的字符串“ ...
- 网页采集(通过HtmlAgilityPack+XPath)
有HtmlAgilityPack这个类库可以更方便地对HTML内容进行分析和提取.因此今天特别学习和实践了一下HtmlAgilityPack和XPath,并作下笔记. 1.下载HtmlAgilityP ...
- Host 'localhost' has multiple addresses. 解决办法
phpstorm调试php 错误提示: Host 'localhost' has multiple addresses. You must choose one explicitly!Couldn't ...
- linux 网络设备驱动
linux 网络驱动 谨以此文纪念过往的岁月 一.前言在linux中网络驱动也是一个大头,如何去理解网络驱动是作为一个linux驱动工程师必备的技能.不过同样的设备,在不同人的手中会有不同的效果,其原 ...
- [Python爬虫] 之一 ： Selenium+Phantomjs动态获取网站数据信息
本人刚才开始学习爬虫,从网上查询资料,写了一个利用Selenium+Phantomjs动态获取网站数据信息的例子,当然首先要安装Selenium+Phantomjs,具体的看 http://www.c ...
- mysql5.0.x统计每秒增删改查替换数及系统每秒磁盘IO
转载自:http://blog.chinaunix.net/uid-9370128-id-393082.html 1. mysql 5.0.x 统计每秒增,删,改,查,替换数 mysql 的show ...
- 小课堂week16 编程范式巡礼第一季 三大基石
编程范式巡礼第一季 三大基石 最近迷上了一些哲史类书籍,回望过去.放眼未来,往往沉浸在其思维之美中无法自拔.计算机编程是一门非常年轻的学科,沉淀不足也是年轻的一个侧面,在编程领域,有足够思想深度的作品 ...
- Open DJ备份与恢复方案
最近接手了一个Cognos项目,第三方用户认证采用的是和Open DJ集成.本人之前很多采用的是cjap ,当然这和cjap相比起来简单的多了,最起码你不必具有Java的基础知识就可以完全驾驭了! 一 ...