（强烈推荐）基于SSM和BootStrap的共享云盘系统设计（项目实现：文件分类）

天道Vax的时间宝藏

发布于 2021-08-11 14:45:24

87900

文章被收录于专栏：用户5305560的专栏用户5305560的专栏

运行总次数：0

重点：文件读取、弹出层显示

难点：LayUI+JS实现弹出框

内容：登录成功后，点击不同的分类，显示对应分类下的缩略图或文件名称。

图1 文件分类页面

1. 使用JS显示文件分类框

在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;
}

2. 目录切换

在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;
}

3. 后台处理显示分类文件

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;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/07/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript