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强势预览] 我的文章一定要做到对读者负责,否则就是失败的文章 -- ...
随机推荐
- 【mybatis】在mybatis分页查询时，主表对关联表 一对多 分页查询怎么实现
现在有这样一个需求: 1.积分商品分页查询 2.一个积分商品会有多张商品图片在商品图片表 1:n的关系 这样在积分商品分页查询的时候,想要顺便把每个积分商品对应的商品图片信息也带出来 实现如下: 1 ...
- Net线程足迹 传递参数至线程
方法一:应用ParameterizedThreadStart这个委托来传递输入参数,这种方法适用于传递单个参数的情况. using System; using System.Collections.G ...
- Java编程兵书
<Java编程兵书> 基本信息 作者: 桂颖 任昱衡 丛书名: 程序员藏经阁 出版社:电子工业出版社 ISBN:9787121207419 上架时间:2013-8-26 出版日期:2013 ...
- mysql中函数greatest 与MAX区别
greatest (a,b,c,d,d)max(a) 这样就能看明白了,greatest 求的是某几列的最大值,横向求最大(一行记录)max(a) 一看就明白了,是给纵向求最大(多行记录).
- https://github.com/wytings
博客中写了很多比较杂乱的东西,有时候可能一时看不出效果,毕竟代码问题确实是 “Talk is cheap. Show me the code” 所以,就开了一个github,把一些日常开发和使用的工具 ...
- 比較不错的一个ios找茬游戏源代码
找茬游戏源代码 .这个是一款很不错的ios找茬游戏源代码,该游戏的兼容性很好的.并且还能够支持ipad和iphone.UI界面设计得也很美丽,游戏源代码真的是一款很完美.并且又很完整的一款休闲类的游戏 ...
- JDBC的批量插入操作
在今天之前,当我遇到需要使用JDBC对数据库进行批量插入操作的时候,我使用的方法如下: ①使用Connection建立数据库连接: ②使用PreparedStatement提交SQL语句,将数据插入: ...
- 这篇讲PHP的讲的有些道理 & mb_substr & 中文处理
http://chengxu.org/p/239.html Python 是否是下一个 PHP? 1. PHP胜在最要命的部署上:没有任何其他语言有像 PHP 一样适合大规模部署的方式.基本上装好 A ...
- TextView子类的常用属性
TextView常见的子类包括EditText,Button,CheckBox, RadioButton等. 1.EditText EditText继承自TextView,因此TextView所有属性 ...
- Oracle PL/SQL语句基础学习笔记(上)
PL/SQL是ORACLE对标准数据库语言的扩展,ORACLE公司已经将PL/SQL整合到ORACLE server和其它工具中了,近几年中很多其它的开发者和DBA開始使用PL/SQL,本文将讲述PL ...