
重 点:文件读取、弹出层显示
难 点:LayUI+JS实现弹出框
内 容:登录成功后,点击不同的分类,显示对应分类下的缩略图或文件名称。

图1 文件分类页面
在WebContent/WEB-INF/menu.jsp页面中,点击左侧的菜单选项(如图片、文档、视频等),将触发index.js中的searchFileType()方法,通过layer弹出层显示文件分类框;searchFileType()方法对应的代码如下所示;
/**查找文件*/
function searchFileType(type){
var tabName = type + "Tab";
$("#fileTypeList li").has("a[aria-controls='"+tabName+"']").addClass("active").siblings().removeClass("active");
$("#"+tabName).addClass("active").siblings().removeClass("active");
changeTypeTab(type);
layer.open({
type: 1,
zIndex : 80,
area: ['890px', '450px'],
title:false,
content: $("#fileTypeList")
});
return false;
}在index.js中添加changeTypeTab()方法,当点击不同的菜单时,切换为不同的目录,并在该目录下根据后台返回的文件地址,遍历显示出所对应的文件,代码如下所示;
/**切换文件类型*/
function changeTypeTab(type){
$.post("file/searchFile.action", {
"regType" : type
}, function(data) {
if (data.success) {
var typeName = type+"Tab";
if(type == "image"){
$("#"+ typeName).empty();
$.each(data.data, function() {
var url = encodeURI('currentPath='+this.currentPath+'&fileType='+this.fileType+'&fileName='+this.fileName);
$("#"+ typeName).append('<a href="file/openFile.action?'+url+'" data-lightbox="roadtrip" title="'
+this.fileName+'"><img alt="'+this.fileName+'" style="margin: 10px" src="file/openFile.action?'+url+'" width="150" height="150"></a>')
});
}else{
$("#"+ typeName + " tbody").empty();
$.each(data.data, function() {
$("#"+ typeName + " tbody").append('<tr><td><a href="#" onclick="return openFile(this)" filetype="'+this.fileType+'" currentPath="'
+this.currentPath+'"><span class="glyphicon glyphicon-'+this.fileType+'" style="margin-right: 10px"></span>'
+this.fileName+'</a></td><td>'+this.fileSize+'</td><td>'+this.lastTime+'</td></tr>');
});
}
}
});
return false;
}1)在FileController类中添加searchFile()方法,用于根据前台所传来的分类信息,获取该用户所对应的分类文件地址,并返回前台显示,代码如下所示;
/**
* 查找文件(模糊查询)
*
* @param reg
* 要查找的文件名
* @param currentPath
* 当面路径
* @param regType
* 查找文件类型
* @return Json对象
*/
@RequestMapping("/searchFile")
public @ResponseBody Result<List<FileCustom>> searchFile(String reg,
String currentPath, String regType) {
try {
List<FileCustom> searchFile = fileService.searchFile(request,
currentPath, reg, regType);
Result<List<FileCustom>> result = new Result<>(376, true, "查找成功");
result.setData(searchFile);
return result;
} catch (Exception e) {
e.printStackTrace();
return new Result<>(371, false, "查找失败");
}
}2)在FileService类中添加searchFile()方法,用于具体获取该分类目录下的文件名以及文件所在目录,代码如下所示。
/**
* 查找文件
*
* @param request
* @param currentPath
* 当前路径
* @param reg
* 文件名字
* @param regType
* 文件类型
* @return
*/
public List<FileCustom> searchFile(HttpServletRequest request, String currentPath, String reg, String regType) {
List<FileCustom> list = new ArrayList<>();
matchFile(request, list, new File(getFileName(request, currentPath)), reg, regType == null ? "" : regType);
return list;
}