ajax+springboot获取遍历文件夹

最新推荐文章于 2025-03-06 11:19:58 发布

危笑qwq

最新推荐文章于 2025-03-06 11:19:58 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： springboot ajax javascript

本文链接：https://blog.youkuaiyun.com/qw160/article/details/117041806

springboot 同时被 3 个专栏收录

38 篇文章

订阅专栏

javascript

22 篇文章

订阅专栏

ajax

8 篇文章

订阅专栏

本文介绍了一个基于Ajax的前后端交互方案，实现文件和文件夹的动态展示与创建。前端通过Ajax请求后端获取指定文件夹下的文件及子文件夹列表，并以按钮形式展示。同时，提供了上传文件和创建文件夹的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

老办法ajax前后端互传参数，前端表单提交需要遍历哪个父文件夹，后端遍历父文件夹并发送json数组给js,js接收后显示在页面上
两个不太好的地方
sp1:判断对象是文件夹还是文件，这里采用了正则表达式判断文件名，如果只有数字字母下划线则判断为文件夹（文件带后缀.dov），所以文件夹最好是英文的~
sp2:输入文件夹名字时由于要传给ajax,获取input输入内容没有用表单而是document.getElementById(“foldername”).value函数，需要额外设置一个按钮使其提交

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    输入文件夹名称：<input  type="text" id="foldername" value="这是内容" ><br>

    <button onclick="textchange()">提交文本</button>
<div id="txtHint"><b>所有文件和文件夹将显示在此处</b></div>
<button onclick="showUser('q')">按钮</button>

    <script>
        function getHsonLength(json){
            var jsonLength=0;
            for (var i in json) {
                jsonLength++;
            }
            return jsonLength;
        }
        function isValid(str) { return /^\w+$/.test(str); }
        //var utext = document.getElementById("foldername");
        // var foldername1=document.getElementById("foldername").innerHTML
        function textchange(){

        var foldername1 = document.getElementById("foldername").value
       // alert(foldername1);
        return foldername1;
        }
        var count=1;
       // function showUser(str) {
        showUser=function (str){

            if(count==1)
            { str=textchange();}
           count=2;

           // alert(str);
            //str="01";
            if (str=="") {
                document.getElementById("txtHint").innerHTML="";
                return;
            }
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
                if (this.readyState==4 && this.status==200) {
                  //  document.getElementById("txtHint").innerHTML=this.responseText;
                    var data1 = JSON.parse(this.responseText);
                    for(var i=0;i<getHsonLength(data1);i++) {
                        var patt = new RegExp("");
                        // if (patt.test(data1[i].name) == false) {
                        if(isValid(data1[i].name)){
                            //alert(data1[i].name);
                            document.write("子文件夹：")
                            //document.write("<br/>")
                         // document.write("<a href='#'>"+data1[i].name+"</a>")
                           var zi=str+"/"+data1[i].name;
                     //       alert(zi)
                            document.write("<button οnclick='showUser(&quot;"+zi+"&quot;);'>"+data1[i].name+"</button>")
                            document.write("<br/>")
                           // document.write("<br/>")
                        }
                        else{
                            document.write("文件：")
                            // document.write("<br/>")
                            document.write("<a href='#'>"+data1[i].name+"</a>")
                            document.write("<br/>")

                        }



                    }
                }
            }
            xmlhttp.open("GET","/j2eelist2?q="+str,true);
            xmlhttp.send();

        }
        //新的

    </script>

</body>
</html>

后端

package com.documentstation.demo.controller;




import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLEncoder;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
@WebServlet(name = "j2eelist2", urlPatterns = "/j2eelist2")
public class j2eelist2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
       String fn=request.getParameter("q");
        // 获取download目录下所有的文件名（放置下载文件的文件目录）
        //     String realPath = getServletContext().getRealPath("temp1");
        String realPath ="D:/"+fn+"/";
        File file = new File(realPath);
        File[] list = file.listFiles();
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        JSONArray jsonArray = new JSONArray();
         JSONObject jsonObj = new JSONObject();
        response.setContentType("text/json;charset=utf-8");
        // 实例化输出流对象
        PrintWriter out = response.getWriter();
        for (File f : list) {
            String name = f.getName();
            // 对内容使用url编码 编码之后的内容ie可以解析
            String encodeName = URLEncoder.encode(name, "utf-8");
            System.out.println(name);
            //  response.getWriter().write("<a href='http://192.168.1.107:8080/spring14/tool/" + name + "'>" + name + "</a><br/>");
           // response.getWriter().write("<img src=\"wenjian.png\" width=100px height=80px\">");
            jsonObj.put("name",name);
            //       jsonObj.put("url",rs.getString("url"));

             jsonArray.add(jsonObj); // 把对象放到数组里，容易遍历


        }

        out.println(jsonArray);
    }

上传文件/创建文件夹

（核心html代码）

<div class="row zhan"></div>
    <div class="row">
        <form method="post" action="/folder" enctype="multipart/form-data">
            输入文件夹名称：<input  type="text" name="foldername" ><br>
            <input type="submit" value="创建文件夹">
        </form>
    </div>
    <div class="row">
        <form method="post" action="/upload" enctype="multipart/form-data">
            <input  type="file" name="file" ><br>
            <input type="submit" value="提交">
        </form>
    </div>

uploadcontroller.java

package com.documentstation.demo.controller;


import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.List;

/**
 * @Description
 * @Author sgl
 * @Date 2018-05-15 14:04
 */
@Controller
public class UploadController {
    private static final Logger LOGGER = LoggerFactory.getLogger(UploadController.class);

    @GetMapping("/upload")
    public String upload() {
        return "upload";
    }

    @PostMapping("/upload")
    @ResponseBody
    public String upload(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return "上传失败，请选择文件";
        }

        String fileName = file.getOriginalFilename();
       // String filePath = "C:/Users/17695/IdeaProjects/documentstation/src/main/webapp/tmp/";
        String filePath = "D:/uploadtest/";

        File dest = new File(filePath + fileName);
        try {
            file.transferTo(dest);
            LOGGER.info("上传成功");
            return "上传成功";
        } catch (IOException e) {
            LOGGER.error(e.toString(), e);
        }
        return "服务器维护，暂停上传功能，下载仍可正常使用！";
    }


}

folder.java

package com.documentstation.demo.controller;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import java.io.File;

@Controller
public class folder {

    @ResponseBody
    @RequestMapping("folder")
    public static String hello(HttpServletRequest request){
        String foldername=request.getParameter("foldername");
        File file=new File("D:\\"+foldername);
        if(!file.exists()){//如果文件夹不存在
            file.mkdir();//创建文件夹
        }
        return "quick helloworld";
    }
}