ztree+ajax 파일 트 리 다운로드 기능 구현
0.프로젝트 준비 작업
1.전단 에 사용 할 플러그 인 라 이브 러 리:
ztree 홈 페이지
2.백 엔 드 maven 의존:
<dependencies>
<!-- servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<!-- springMVC -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.6.RELEASE</version>
</dependency>
<!-- jar -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.8.0</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
// gson ，
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.2.4</version>
</dependency>
</dependencies>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!-- springMvc DispatcherServlet -->
<servlet>
<servlet-name>web</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springConfig.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>web</servlet-name>
<url-pattern>*.mvc</url-pattern>
</servlet-mapping>
<!-- , post -->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
<init-param>
<param-name>forRequestEncoding</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>forResponseEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!-- -->
<context:component-scan base-package="com.file"></context:component-scan>
<!-- springMVC -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- ： -->
<property name="prefix" value="/WEB-INF/view/" />
<!-- ： -->
<property name="suffix" value=".jsp" />
</bean>
<!-- JSON （Jackson）-->
<mvc:annotation-driven />
<!-- -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- -->
<property name="defaultEncoding" value="utf-8"> </property>
<!-- -1 maxUploadSizePerFile ， maxUploadSize -->
<property name="maxUploadSizePerFile" value="-1"> </property>
<!-- ， ， 1M（1*1024*1024） -->
<property name="maxUploadSize" value="1048576"/>
</bean>
</beans>서버 쪽 파일 디 렉 터 리:
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 < files.length; i++) {
// //
if (files[i].exists()&&files[i].isDirectory()){
listFile(files[i]);
}else {
// ， ，
System.out.println(files[i].getName());
}
}
}
}
}
}코드:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" rel="external nofollow" type="text/css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core.min.js"></script>
<title> </title>
</head>
<body>
<script>
var settingss = {
//zTree ， ， zTree id 。
treeId:"treeDemo",
data: {
simpleData: {
enable: true, //true 、 false 、
idKey: "id", //
pIdKey: "pId", //
rootPId: "0" // ， pIdKey
},
key: {
name: "name" //zTree ："name"
}
},
check:{
enable:true, //true 、 false 、
nocheckInherit:false, // nocheck = true ， nocheck = true
chkboxType: { "Y": "p", "N": "s" }
},
};
$(document).ready(function(){
$.ajax({
type:"get",
url:"/file/init.mvc",
async:true,
success:function(result){
console.log(result)
// ajax
var zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, result); //
zTreeObj.expandAll(false); //true 、false
}
});
});
</script>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>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;
}
}
/**
* @author compass
* @version 1.0
* @date 2021-05-15 12:31
*/
public class FilerService {
// list
List<MyFile> fileList = new ArrayList<>();
/**
* ： ， List
* @param file
* @param index ：1
* @return
*/
public List<MyFile> listAll1(File file , int index) {
File[] listFiles= file.listFiles();
//
for (int i=1;i<listFiles.length+1;i++){
if (listFiles[i-1].isDirectory()){
// url pid=0
MyFile myFile = new MyFile(i,0,listFiles[i-1].getName(),"");
fileList.add(myFile);
}else {
//
String filename=listFiles[i-1].getName();
// id ：( id*100)+
MyFile myFile = new MyFile((100*index)+i,index,listFiles[i-1].getName(),"http://localhost:8080/file/download.mvc?filename="+filename);
fileList.add(myFile);
}
}
//
if (file.exists()){
//
File[] files = file.listFiles();
if (files!=null&&files.length>0){
//
for (int i = 0; i < files.length; i++) {
if (files[i].exists()&&files[i].isDirectory()){
// index+1
listAll1(files[i],i+1);
}
}
}
}
return fileList;
}
//
String parentDir=null;
/**
* , null
* @param fileName
* @param dir
* @return
*/
public String getFileName(String fileName,File dir){
if (dir.exists()){
File[] files = dir.listFiles();
if (files!=null&&files.length>0){
for (int i=0;i<files.length;i++){
if (files[i].exists()&&files[i].isDirectory()){
getFileName(fileName,files[i]);
}else {
// parentDir
if (fileName.equals(files[i].getName())){
parentDir=files[i].getParent();
break;
}
}
}
}
}
return parentDir;
}
}
/**
* @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<MyFile> test(){
File file = new File("D:\\IDE2019\\work");
FilerService service = new FilerService();
// MyFile List
List<MyFile> listAll1 = service.listAll1(file, 1);
// Json
return listAll1;
}
//
@GetMapping("download.mvc")
public ResponseEntity <byte[]> 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<byte[]> result = new ResponseEntity<>(FileUtils.readFileToByteArray(downloadFile), header, HttpStatus.OK);
return result;
}
}
이것 은 간단 한 사용 일 뿐 최적화 해 야 할 부분 이 많 습 니 다.물론 다른 방법 으로 도 실현 할 수 있 습 니 다.이것 이 바로 작은 연습 이 라 고 할 수 있 습 니 다.ajax 와 재 귀 지식 을 복습 하 세 요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
가장 간단한 zTree 응용 사례텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
