IT俱乐部 Ajax ztree+ajax实现文件树下载功能

ztree+ajax实现文件树下载功能

基于java实现文件树下载,供大家参考,具体内容如下

0.项目准备工作

1.前端用到的插件库:

ztree官网

2.后端maven依赖:

javax.servletjavax.servlet-api3.1.0providedorg.springframeworkspring-webmvc5.2.6.RELEASEcommons-iocommons-io2.8.0commons-fileuploadcommons-fileupload1.3.3
     // gson可以不要,这是我测试时使用的
    com.google.code.gsongson2.2.4

3.web.xml配置

weborg.springframework.web.servlet.DispatcherServletcontextConfigLocationclasspath:springConfig.xml1web*.mvccharacterEncodingFilterorg.springframework.web.filter.CharacterEncodingFilterencodingutf-8forRequestEncodingtrueforResponseEncodingtruecharacterEncodingFilter/*

4.springConfig.xml配置

1.效果展示:

服务器端的文件目录:

2.思路分析

1、需要递归遍历某个目录,并且判断是目录还是文件
2、找到父目录和子文件的关系,构建文件对象,将该对象加入到list集合中
3、将list集合转为json,返回给前端进行渲染
4、前端渲染出来的每个文件都包含一个该文件对应的下载url,点击该文件跳转到该文件的下载接口
5、提供下载接口,前端需要传递一个文件名称,然后后端根据文件名称去遍历指定的目录,查询是否有该文件,如果有,则将该文件进行下载

先来看下如果递归遍历获取到某个目录下的所有文件:

public class Test2 {
    
    public static void main(String[] args) {
        File file = new File("D:\IDE2019");
        listFile(file);

    }

    public  static void listFile(File file ) {
        // 判断该文件是否存在
        if (file.exists()){
            // 获取当前文件夹下的所有子文件
            File[] files = file.listFiles();
            if (files!=null&&files.length>0){
                // 对该文件夹进行遍历
                for (int i = 0; i 

3.前端实现代码:

代码:

文件下载

    4.后端代码实现:

    1.抽象出来的实例对象bean

    /**
     * @author compass
     * @version 1.0
     * @date 2021-05-14 22:41
     */
    public class MyFile {
    
        private int id;
        private int pId;
        private String name;
        private String url;
    
        public MyFile(int id, int pId, String name, String url) {
            this.id = id;
            this.pId = pId;
            this.name = name;
            this.url = url;
        }
    
        @Override
        public String toString() {
            return "MyFile{" +
                    "id=" + id +
                    ", pId=" + pId +
                    ", name='" + name + ''' +
                    ", url='" + url + ''' +
                    '}';
        }
    
        public int getId() {
            return id;
        }
    
        public void setId(int id) {
            this.id = id;
        }
    
        public int getpId() {
            return pId;
        }
    
        public void setpId(int pId) {
            this.pId = pId;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public String getUrl() {
            return url;
        }
    
        public void setUrl(String url) {
            this.url = url;
        }
    }

    2.渲染数据和指定文件名查询文件地址的类

    /**
     * @author compass
     * @version 1.0
     * @date 2021-05-15 12:31
     */
    public class FilerService {
    
        // 将构建为文件对象的文件或目录放到list集合中
        List fileList = new ArrayList();
    
        /**
         * 功能:递归遍历文件,并且将文件或目录按照规定构建为对象 撞到List集合返回
         * @param file 待遍历的文件夹
         * @param index 扫描文件赋值指针 初始值为 :1
         * @return
         */
        public  List listAll1(File file , int index) {
    
            File[] listFiles=  file.listFiles();
    
            // 将文件或目录构建为对象
            for (int i=1;i0){
                    // 对文件进行遍历
                    for (int i = 0; i 0){
                    for (int i=0;i

    3.下载和渲染数据的Controller

    /**
     * @author compass
     * @version 1.0
     * @date 2021-05-14 21:43
     */
    @Controller
    @RequestMapping("/file/")
    public class FileDownloadController {
    
    
        // 提供访问接口
        @GetMapping("downloadIn.mvc")
        public String downloadIn(){
            return "index";
        }
    
        // 初始化页面数据
        @ResponseBody
        @GetMapping("init.mvc")
        public List test(){
            File file = new File("D:\IDE2019\work");
            FilerService service = new FilerService();
            // 将制定目录的文件夹 下的目录和文件构建为MyFile对象装到List集合中
            List listAll1 = service.listAll1(file, 1);
            // 返回Json数据给前端进行渲染
            return listAll1;
        }
    
        // 提供下载接口
        @GetMapping("download.mvc")
        public ResponseEntity  fileDownload1(String filename,HttpServletRequest request) throws IOException {
            // 指定下载那个目录下的文件
            File file = new File("D:\IDE2019\work");
            FilerService service = new FilerService();
            // 获取到该文件的父目录
            String path = service.getFileName(filename, file);
    
            // 创建文件下载对象
            File downloadFile = new File(path, filename);
    
            HttpHeaders header = new HttpHeaders();
            header.setContentDispositionFormData("attachment",filename);
            header.setContentType(MediaType.APPLICATION_OCTET_STREAM);
            ResponseEntity result = new ResponseEntity(FileUtils.readFileToByteArray(downloadFile), header, HttpStatus.OK);
            return result;
        }
    }

    测试:可以看到我们每点击一个文件都可以跳转到我们的下载接口,进行下载的。

    这只是一个简单的使用,还有很多地方需要进行优化,当然也可以使用别的方法进行实现,这就是算是一个小练习吧,复习一下ajax和递归的知识。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IT俱乐部。

    本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/ajax/1898.html
    上一篇
    下一篇
    联系我们

    联系我们

    在线咨询: QQ交谈

    邮箱: 1120393934@qq.com

    工作时间:周一至周五,9:00-17:30,节假日休息

    关注微信
    微信扫一扫关注我们

    微信扫一扫关注我们

    返回顶部