velocity渲染JS文件,file-node.js分析

$(function() {
    var filePath = document.getElementById("filePathRem").value;
    //注意这里面只能处理寻找文件夹的子文件或者子文件夹事件，可以把文件的读取写到 $('#container').on("changed.jstree", function (e, data)函数中
    $('#container').jstree({
        'core': {
            'data':
            //node为点击的节点，cd为输出结果的函数
                function (node, cb) {
                    var formdata = new FormData();
                    formdata.append("file-path",filePath);
                    formdata.append("id",node.id);
                    //通过表单对象上传文件或者数据，设置
                    // processData: false,表示不要对data参数进行序列化处理
                    //contentType: false,避免 JQuery 对data操作，可能失去分界符，而使服务器不能正常解析文件。
                    $.ajax({
                        //不要用get方法，因为#在浏览器中有特殊含义，　
                        // #代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，http://www.example.com/index.html#print就代表网页index.html的print位置。
                        // 浏览器读取这个URL后，会自动将print位置滚动至可视区域。
                        //并且在发送的请求中，自动忽略#，而首次打开页面的第一次请求id=#
                        //url: "/admin/file/zip/show.action?lazy&file-path=" + filePath + "&id=" + node.id,
                        url:"/admin/file/zip/show.action",
                        data:formdata,
                        type:"post",
                        dataType:"json",
                        processData: false,
                        contentType: false,
                        success: function (oResult) {
                            if (oResult.result.success == 1) {
                                cb(oResult.array);
                            } else {
                                alert(oResult.result.message);
                            }
                        }
                    })
                }
        },
        //0为文件夹，即默认，1为文件
        "types" : {
            0 : {
                "icon" : "glyphicon glyphicon-folder",
                "valid_children" : []
            },
            1 : {
                "icon" : "glyphicon glyphicon-file"
            }
        },
        //搜索功能插件和类别插件，以对文件夹和文有不同的图标
        "plugins" : ["search","types"]
    });

    //上面的表单s和本函数都用于搜索，模糊搜索，不区分大小写
    $("#s").submit(function(e) {
        e.preventDefault();
        $("#container").jstree(true).search($("#q").val());
    });

    //注意changed与click的区别，前者只要状态不变，点击多少次都加载一次，后者每次点击都重新加载
    $('#container').on("changed.jstree", function (e, data) {
        // console.log("The selected nodes are:");
        // //显示被选择节点id编号
        // console.log(data.selected);
        // //显示被选择节点的命名
        // console.log(data.node.text);
        var name=String(data.selected);
        //如果包含.则为请求文件
        if(name.search("\\.")>1){
            //判断是否是图片，其他文件都是读取Json字符串的形式
            if(!isImage(name)){
                var formdata = new FormData();
                formdata.append("file-path",filePath);
                formdata.append("id",name);
                $.ajax({
                    url:"/admin/file/zip/show.action",
                    data:formdata,
                    type:"post",
                    dataType:"json",
                    processData: false,
                    contentType: false,
                    success: function (oResult) {
                        if (oResult.result.success == 1) {
                            //首先把页面中的可能存在的图片清空
                            document.getElementById("image-panel").innerHTML ='';
                            //由于editor.md每次更新内容之后都会将<textarea id="append-test" style="display:none;"></textarea>删除，那么每次更新前都需要添加
                            document.getElementById("markdown-editor").innerHTML='<textarea id="append-test" style="display:none;"></textarea>';
                            document.getElementById("append-test").value="```\n"+oResult.fileContent+"\n```";
                            //用于将markdown文本转化为html格式
                            editormd.markdownToHTML("markdown-editor", {
                            });
                        } else {
                            alert(oResult.result.message);
                        }
                    }
                })
            }else {    //对于图片，我们要显示为图片，而不是文本的字符流
                document.getElementById("markdown-editor").innerHTML='';
                document.getElementById("image-panel").innerHTML = '<img width="500" id="img-circle" src="">';
                document.getElementById("img-circle").src = "/admin/file/zip/image.action?file-path="+filePath+"&id="+name;
            }
        }
    });
    //判断请求文件是否是图片，仅支持常用类型
    function isImage(objFile) {
        var objtype = objFile.substring(objFile.lastIndexOf(".")).toLowerCase();
        var fileType = new Array(".png", ".jpg", ".jpeg", ".gif", ".bmp", ".ico");
        for (var i = 0; i < fileType.length; i++) {
            if (objtype == fileType[i]) {
                return true;
                break;
            }
        }
        return false;
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目展示</title>
    <link rel="stylesheet" type="text/css" href="/css/editormd.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<!-- 禁用复制粘贴-->
<body oncontextmenu=self.event.returnValue=false onselectstart="return false">
<!-- 搜索表单-->
<form id="s" class="search">
    <input type="search" id="q" />
    <button type="submit">Search</button>
</form>
<!-- 下载按钮-->
<div class="action">
    <input type="hidden" id="filePathRem" value="$!{filePath}">
    <a href="/admin/file/zip/download?file-path=$!{filePath}">下载</a>
</div>
<!-- 放JStree目录树-->
<div id="container" class="side-nav"></div>
<!-- 放editor.md文本-->
<div id="markdown-editor" class="markdown-text"></div>
<!-- 放图片-->
<div id="image-panel" class="image-panel"></div>
</body>
<!--jstree官网https://github.com/vakata/jstree#readme-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"></script>
<script src="/js/file-node.js"></script>

<script src="/js/editormd.min.js"></script>
##支持markdown快速解析
<script src="/lib/marked.min.js"></script>
##支持代码高亮
<script src="/lib/prettify.min.js"></script>
</html>