效果图：



前台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文件预览的更多相关文章
	

    
								
  1. Web方式预览Office/Word/Excel/pdf文件解决方案
		
    最近在做项目时需要在Web端预览一些Office文件,经过在万能的互联网上一番搜索确定并解决了. 虽然其中碰到的一些问题已经通过搜索和自己研究解决了,但是觉得有必要将整个过程记录下来,以方便自己以后查 ...
    
		
    2. 
						
  2. odoo13之文件预览widget/模块
		
    本文示例代码可查看github仓库:odoo13_file_preview 文件预览效果图展示 效果描述: 1.当点击图片或者文件时展开图片. 2.当点击关闭按钮时关闭图片预览. 3.当点击下载按钮时 ...
    
		
    3. 
						
  3. Java实现web在线预览office文档与pdf文档实例
		
    https://yq.aliyun.com/ziliao/1768?spm=5176.8246799.blogcont.24.1PxYoX 摘要: 本文讲的是Java实现web在线预览office文档 ...
    
		
    4. 
						
  4. Qt SD卡 文件系统挂载、文件预览
		
    /********************************************************************************** * Qt SD卡 文件系统挂载. ...
    
		
    5. 
						
  5. java 文件转成pdf文件  预览
		
    一.前端代码 //预览功能 preview: function () { //判断选中状态 var ids =""; var num = 0; $(".checkbox& ...
    
		
    6. 
						
  6. java实现office文件预览
		
    不知觉就过了这个久了,继上篇java实现文件上传下载后,今天给大家分享一篇java实现的对office文件预览功能. 相信大家在平常的项目中会遇到需要对文件实现预览功能,这里不用下载节省很多事.大家请 ...
    
		
    7. 
						
  7. COS控制台进阶 - 文件预览和在线编辑
		
    导语 | COS控制台新上线了文件预览功能,用户可在控制台内直接预览.编辑文件内容. 前不久,微软发布了 vscode for web 的公告,是基于web的在线代码编辑器,无需下载安装可以直接在we ...
    
		
    8. 
						
  8. Atitit.office word  excel  ppt pdf 的web在线预览方案与html转换方案 attilax 总结
		
    Atitit.office word  excel  ppt pdf 的web在线预览方案与html转换方案 attilax 总结 1. office word  excel pdf 的web预览要求 ...
    
		
    9. 
						
  9. [Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图，Ay制作,AyWindow强势预览]
		
    原文:[Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图,Ay制作,AyWindow强势预览]  我的文章一定要做到对读者负责,否则就是失败的文章  -- ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 一张图彻底了解Unity脚本的生命周期
			
    以前没好好看Unity的脚本手册,原来写的是这么的全...尤其起yield  www  协同 这部分看了这张图彻底的懂了..
    
			
    2. 
						
  2. 使用富文本OHAttributedLabel
			
    OHAttributedLabel 富文本标签 https://github.com/AliSoftware/OHAttributedLabel 以下是我渲染出来的效果 OHAttributedLab ...
    
			
    3. 
						
  3. thinkphp5(tp5)中success跳转页面和弹窗问题解决
			
    自己做了一个form页面,对其操作后,根据$this->success('提示信息',''),执行后是通过笑脸页面跳转,而不是在本页弹框后刷新.源码里带的原来的例子是弹出框刷新,为什么我自己做的 ...
    
			
    4. 
						
  4. Apache Mahout 简介 通过可伸缩、商业友好的机器学习来构建智能应用程序
			
    在信息时代,公司和个人的成功越来越依赖于迅速有效地将大量数据转化为可操作的信息.无论是每天处理数以千计的个人电子邮件消息,还是从海量博客文章中推测用户的意图,都需要使用一些工具来组织和增强数据. 这其 ...
    
			
    5. 
						
  5. Servlet Filter 示例
			
    1. CityQuery.java package com.xxx.servlet; import com.google.common.collect.Lists; import com.xxx.da ...
    
			
    6. 
						
  6. BeagleBone折腾记（一）：连接你的狗板
			
    BeagleBone折腾记一连接你的狗板 准备 了解BeagleBone BeagleBone社区 所需软硬件 USB连接 TTL连接 结语 准备 了解BeagleBone BeagleBone可能一 ...
    
			
    7. 
						
  7. HDU 1232 (13.10.31)
			
    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
    
			
    8. 
						
  8. JSP2.0自定义标签
			
    JSP1.0中可以通过继承TagSupport或者BodyTagSupport来实现自定义的tag处理方法. JSP2.0中也支持另外一种更为简单的自定tag的方法,那就是直接讲JSP代码保存成*.t ...
    
			
    9. 
						
  9. Javascript-history.go()和history.back()的用法和区别
			
    简单的说就是:go(-1): 返回上一页,原页面表单中的内容会丢失:back(): 返回上一页,原页表表单中的内容会保留. history.go(-1):后退+刷新 history.back():后退 ...
    
			
    10. 
						
  10. 一次踩坑记录（使用rpc前后端分离服务总是注册不上）
			
    问题简述: 项目架构使用了前后端分离,使用rpc进行服务调用与注册,这里没有用dubbo之类的,仅仅用zookeeper,每次在启动项目时总是报错rpcException异常跟NPE异常,后台查看zo ...
    
			
    11.