php获取目录 html通过ajax能够进入php获取到的目录 并能打开该目录下的文件
时间: 2024-02-06 12:04:00 浏览: 23
你可以使用PHP的`scandir`函数来获取指定目录下的所有文件和子目录,然后利用Ajax将获取到的文件列表传递给前端,最后利用JavaScript动态生成目录结构和文件列表。当用户点击某个文件时,再次通过Ajax请求该文件的内容并在页面上展示。
以下是一个简单的实现代码:
PHP文件(例如:getdir.php):
```php
<?php
$dir = 'path/to/your/directory'; // 指定需要获取文件列表的目录路径
$files = scandir($dir); // 获取目录下的所有文件和子目录
echo json_encode($files); // 输出文件列表,以JSON格式返回给前端
?>
```
HTML文件:
```html
<!DOCTYPE html>
<html>
<head>
<title>通过Ajax获取目录和文件</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "getdir.php", // 指定获取目录列表的PHP文件路径
success: function(data){
var files = JSON.parse(data); // 解析JSON字符串成为文件列表数组
for(var i=0; i<files.length; i++){
// 如果是子目录,则递归调用
if(files[i] != "." && files[i] != ".." && is_dir(files[i])){
var dirPath = files[i];
var dirName = dirPath.substring(dirPath.lastIndexOf("/") + 1);
var $dirDiv = $("<div>").text(dirName).appendTo("#dir-list");
$dirDiv.click(function(){
// 点击目录时,递归调用自身获取子目录和文件
var dirPath = dirPath + "/" + $(this).text();
getFiles(dirPath);
});
}
// 如果是文件,则添加到文件列表中
else if(files[i] != "." && files[i] != ".."){
var filePath = files[i];
var fileName = filePath.substring(filePath.lastIndexOf("/") + 1);
var $fileDiv = $("<div>").text(fileName).appendTo("#file-list");
$fileDiv.click(function(){
// 点击文件时,通过Ajax获取文件内容并展示在页面上
$.ajax({
url: "getfile.php?file=" + filePath, // 指定获取文件内容的PHP文件路径和文件名
success: function(data){
$("#file-content").text(data); // 将获取到的文件内容放入ID为"file-content"的文本框内
}
});
});
}
}
}
});
});
// 递归调用自身获取子目录和文件
function getFiles(dir){
$.ajax({
url: "getdir.php?dir=" + dir, // 指定获取目录列表的PHP文件路径和目录名
success: function(data){
var files = JSON.parse(data); // 解析JSON字符串成为文件列表数组
$("#dir-list").empty(); // 清空目录列表
$("#file-list").empty(); // 清空文件列表
for(var i=0; i<files.length; i++){
// 如果是子目录,则递归调用
if(files[i] != "." && files[i] != ".." && is_dir(dir + "/" + files[i])){
var dirPath = dir + "/" + files[i];
var dirName = files[i];
var $dirDiv = $("<div>").text(dirName).appendTo("#dir-list");
$dirDiv.click(function(){
// 点击目录时,递归调用自身获取子目录和文件
var dirPath = dir + "/" + $(this).text();
getFiles(dirPath);
});
}
// 如果是文件,则添加到文件列表中
else if(files[i] != "." && files[i] != ".."){
var filePath = dir + "/" + files[i];
var fileName = files[i];
var $fileDiv = $("<div>").text(fileName).appendTo("#file-list");
$fileDiv.click(function(){
// 点击文件时,通过Ajax获取文件内容并展示在页面上
$.ajax({
url: "getfile.php?file=" + filePath, // 指定获取文件内容的PHP文件路径和文件名
success: function(data){
$("#file-content").text(data); // 将获取到的文件内容放入ID为"file-content"的文本框内
}
});
});
}
}
}
});
}
</script>
</head>
<body>
<div id="dir-list"></div>
<div id="file-list"></div>
<textarea id="file-content"></textarea>
</body>
</html>
```
在上面的代码中,我们利用jQuery的Ajax函数向PHP文件发送请求,获取目录下的所有文件和子目录,并将文件列表以JSON格式返回给前端。然后利用JavaScript动态生成目录结构和文件列表,并为每个目录和文件添加点击事件。当用户点击某个目录时,通过递归调用自身获取该目录下的子目录和文件;当用户点击某个文件时,再次通过Ajax请求该文件的内容并在页面上展示。注意要将`getdir.php`和`getfile.php`替换为你实际的PHP文件路径。