前端 -＞ JavaScript 查看附件功能(在目录树中查看图片,pdf等附件)

需要的结果:

读取指定路径文件夹下的所有文件,并生成目录树

1.点击触发按钮打开附件窗口

1.Html节点写好
2.监听函数-SelectFuJian()是该功能的主要js类

      <li id="SelectFuJian"><a href="#">查看附件</a></li>

      /**
       * 功能描述: 点击查看附件,弹出查看附件窗口
       * load():加载查看附件的js代码,所有功能围绕lode执行
       */
      $('#SelectFuJian', this.html).on('click', $.proxy(function (e) {
        var selectFuJian = new SelectFuJian();
        selectFuJian.load(url);
      }, this));

2.将URL传入后端,获取的json

1.将url用ajax传进后端,方法是get
2.处理后的json回调success()

request: function (options) {
                options.method = "GET";
                var url = url;
                deferred = $.ajax({
                    url: url,
                    type: options.method,
                    data: options.data
                });
                
	            deferred.then(function (res) {
	                    if (options.success){
	                        options.success.call(options.context, res);
	               		 } 
	            };
			}

1.new一个Structure类,用来存放读取文件夹中的数据
一个文件夹用数组对象来表示,有一个文件夹名字name,一个id,一个子文件夹数组
2.GetAllFiles:从url中读取所有文件,包括文件夹中的子文件(数组中用数组表示子文件夹)
3.将获取的文件夹对象转化为json字符串

Structure node = new Structure();
GetAllFiles(path, node);
string treeSting = node.toJSON();
return treeSting;

3.用回调的json创建目录

1.transformTreeNode:将拿到的json字符串,变成前端的对象,创建数组,将数据一个一个遍历进datastore对象中
2.loadTree:创建目录,在指定的html节点中,用得到的json datastore数组创建目录树,返回树节点
3.callback :只要点击了目录的根节点,就会触发_fileNodeClick(),_fileNodeClick会加载对应的url找到数据
4.show:显示窗口

        success: function (src) {
          var nodes = context.transformTreeNode(src);
          context.loadTree($(".html"), nodes, callback);
          context.show();
          var callback = {
            onClick: function (treeNode) {
              context._fileNodeClick(treeNode);
            },
          }
        }

4.点击触发目录节点

1.拿到一个url
2.判断url的类型
3.图片就加载图片,pdf就设置iframe标签,其他就打开url

 _fileNodeClick: function (treeNode) {
      var url = 'www.baidu.com';
      var filetype = url .substring(url .lastIndexOf("."));
      if (filetype == ".png" || filetype == ".jpg") {
        $('.rightPanel', this._container).signPictureView({
          'src': url, 'closeBtn': false
        });
      }
      else {
        if (filetype == ".pdf") {
          $('.rightPanel', this._container).append("<iframe style='width:100%;height:100%' src=" + url + "></iframe>")
        }
        else {
          window.open(url);
        }
      }
    },

显示窗口show

show: function () {
      $(this._container).addClass("show");
}

整个js

define("sfs.proj.SelectFuJian", [
  "text!Template/App/lc/SelectFuJian.html",
  "css!Theme/Styles/Blue/home/css/selectFuJian.css",
], function (tpl) {
  sfs.proj.SelectFuJian = sfs.Class({
    _container: null,

    /**
     * 功能描述: 初始化 加载load(运维配置中rodPath路径)
     * this._container:指定id的</script>标签的html
     */
    initialize: function () {
      this._template = tpl;
      this._container = $(sfs.DomUtil.getTemplate(this._template, "main"));
      $(document.body).append(this._container);
      this.load(actionConfig.selectFuJian.items.rodPath);
    },

    /**
     * 功能描述: 本类的主要调度方法,主要方法都是通过lode调用
     * 重要注释: 调用的方法请查看对应方法的注释
     * path:运维配置中rodPath路径
     * foldPath:格式转换后的路径
     */
    load: function (path) {
      var foldPath = this._transformFolderPath(path);
      this.createDirectory(foldPath);
      this.addEvent();
    },

    /**
     * 功能描述: 转换路径格式 示例:'D:\\代码\\聊城\\查看附件' => 'D:\代码\聊城\查看附件'
     */
    _transformFolderPath: function (path) {
      return path.replace(/\\/g, ",");
    },

    /**
     * 功能描述: 将文件路径通过ajax传入后台遍历文件,回调json字符串创建目录
     * 重要注释: 调用的方法请查看对应方法的注释
     * name: "business-filetree-all":用name的value来映射后台代码的位置
     * src: 后台遍历路径所有文件,回传json字符串对象src
     * nodes:json字符串转换成的json对象
     */
    createDirectory: function (foldPath) {
      var context = this;
      sfs.Request({
        name: "business-filetree-all",
        data: {path: foldPath},
        context: context,
        success: function (src) {
          if (src === "error") {
            context.file = true;
            return;
          }
          var nodes = JSON.parse(src);
          context.bianLiNode(nodes);
        }
      });
    },

    /**
     * 功能描述: 在json对象中找到所有具体文件的后缀(jpg,pdf,txt...)
     * 重要注释: 调用的方法请查看对应方法的注释
     * nodes:json字符串转换成的json对象
     * node:对象数组中指定索引的数组值(如:下标为1的数组中所有的数据)
     * node.options.path:每个具体的文件都会有一个指定的路径('D:\代码\聊城\查看附件\1.jpg')
     * suffix:获取具体后缀
     */
    bianLiNode: function (nodes) {
      var thistest = this;
      forEach = function (nodes) {
        for (var i in nodes.childrens) {
          var node = null;
          if (nodes.childrens.hasOwnProperty(i)) {
            node = nodes.childrens[i];
          }
          if (node.options.path !== undefined) {
            var suffix = "";
            var ii = 0;
            for (ii = node.options.name.length - 1; ii >= 0; ii--) {
              suffix = node.options.name.charAt(ii) + suffix;
              if (node.options.name.charAt(ii) === '.') {
                break;
              }
            }
            thistest.addHtml(node, suffix);
          }
          forEach(node);
        }
      };
      forEach(nodes);
    },

    /**
     * 功能描述: 拿到具体的后缀和文件的path,添加合适的html到前端显示文件
     * 重要注释: 调用的方法请查看对应方法的注释
     * paths:每个具体的文件都会有一个指定的路径('D:\代码\聊城\查看附件\1.jpg')
     * localPath:运维中的rodPath路径
     * webPath:运维中的iis路径
     * url:服务器路径+文件相对路径(如:localhost+1.jpg)
     * html:指定的</script>标签的html
     */
    addHtml: function (node, suffix) {
      var paths = node.options.path;
      var localPath = actionConfig.selectFuJian.items.rodPath;
      var webPath = actionConfig.selectFuJian.items.iis;
      paths = paths.replace(localPath, "");
      var url = webPath + paths;
      var html = $(sfs.DomUtil.getTemplate(this._template, "fujian"));

      if (suffix === ".docx") {
        $('.wrapper .viewport .overview .item_box .item_content', this._container).append(html);
        $('.ptf_text', html).text(node.options.name);
        $('.down', html).attr('href', url);

      }
      else {
        if (suffix === ".pdf" || suffix === ".pdf" || suffix === ".jpg" || suffix === ".txt") {
          $('.wrapper .viewport .overview .item_box .item_content', this._container).append(html);
          $('.ptf_text', html).text(node.options.name);
          $('.down', html).text('查看');
          $('.down', html).attr('href', url);
        }
      }
    },

    /**
     * 功能描述: 添加监听事件(移除窗口,收放文件夹)
     */
    addEvent: function () {
      var $panel_system_help = $(".panel_system_help");
      var $wrapper = $panel_system_help.find(".wrapper");
      $wrapper.tinyscrollbar();
      //点击移除面板
      $panel_system_help.find(".top_box").on("click", ".close", $.proxy(function () {
          $panel_system_help.remove();
        }, this)
      );
      //点击文件夹展开内容
      $wrapper.find(".item_header").on("click", $.proxy(function (e) {
          var $target = $(e.currentTarget);
          $target.find(".folder_icon").toggleClass("icon-folder3").toggleClass("icon-folder");
          $target.closest(".item_box").find(".item_content").toggle();
          $wrapper.updateScroll("relative");
        }, this)
      );
    },
  })
})