java 预览zip_java压缩包上传，解压，预览(利用editor.md和Jstree实现)和下载

java压缩包上传，解压，预览(利用editor.md和Jstree实现)和下载

实现功能：zip文件上传，后台自动解压，Jstree树目录(遍历文件)，editor.md预览

采用Spring+SpringMVC+Maven+Jstree+editor.md实现，主要功能：

zip压缩文件的上传

后台自动解压

Jstree自动获取最上层目录，每次仅仅会获取当前层的文件或者文件夹，然后点击文件夹或者文件，通过ajax与服务器交换数据，减轻检索和数据传输压力

后台通过文件路径遍历文件夹

通过editor.md将文本代码高亮显示

图片的解析预览

总体项目目录结构：

预览：

点击提交后：

并提供下载功能

1. 分析代码

上传压缩包的html代码，使用velocity模板渲染引擎：

上传压缩项目包

提示：压缩包内请勿包含中文！

$(window).load(function() {

//当鼠标移出输入框

$('#file-name').on('blur', function(){

var fileName = document.getElementById("file-name").value;

if(fileName==''){

$('.file-name-check').html('');

$('.file-name-check').append("请输入项目名！")

}

});

$("#file-zip").bind("change",function(){

var imgArr = ["zip"];

if($(this).val() == "")

{

alert("请选择文件！");

}

else{

var file = $(this).val();

var len = file.length;

var ext = file.substring(len-3,len).toLowerCase();

if($.inArray(ext,imgArr) == -1)

alert("不是zip格式");

}

});

$('#upload-zip').on('click', function(){

var form = document.getElementById("zipForm");

if(document.getElementById("file-name").value==''){//当项目名为空时

alert("请输入项目名！");

return false;

}

if(document.getElementById("file-zip").value==''){//当项目为空时

alert("请上传项目！");

return false;

}

var formdata = new FormData(form);

$.ajax({

url:"/admin/file/zip/upload",

data: formdata,

type:"post",

//预期服务器返回的数据类型,自动解析json返回值，不设置的话可能要执行oResult = JSON.parse(oResult);进行解析

dataType:"json",

//默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，

// 都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

processData: false,

//contentType: false,避免 JQuery 对data操作，可能失去分界符，而使服务器不能正常解析文件。

contentType: false,

success: function(oResult) {

// console.log(oResult);

if(oResult.success==1){

window.location.href="/admin/file/zip/show?file-path="+oResult.url;

}else{

alert(oResult.message);

}

}

})

// .done(function(oResult) { //注意done表示成功，fail表示失败，always表示不论成功还是失败，会执行的函数，

// //但是在低版本jquery不兼容，是高版本jquery推荐

// if(oResult.success==1){

// window.location.href="/";

// alert(oResult.message);

// }else{

// alert(oResult.message);

// }

// }).fail(function () {

// alert('出现错误，请重试');

// });

})

});

预览自动解压后文件夹的html代码，使用velocity模板渲染引擎：

项目展示

Search

下载

##支持markdown快速解析

##支持代码高亮

对应的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();