（1）先要想好要操作哪个文件？
（2）确定文件的路径？
（3）要有什么文件管理功能？
一、先做一下简单的查看文件功能，文件中的文件和文件夹都显示，但是双击文件夹可以显示下一级子目录，双击“返回上一级”就可以返回到上一级目录
（1）先将需要管理的文件遍历出来，可以加个样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../jquery-3.2.0.js"></script> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px;} .mulu{ background-color:#69C; color:#FFF;} .file{ 50%; height:30px; border:1px solid #63F} .prev{ background-color:#6FC; color:#63F;} .prev:hover{ cursor:pointer;} .mulu:hover{ cursor:pointer;} #delete{ float:right} </style> </head> <body> <input type="text" id="name" /> <input type="button" value="新建" id="new" /> <?php session_start();//要显示的文件夹名称 $fname = "./zongbiao";//打开目录资源 if(!empty($_SESSION["url"])) { $fname = $_SESSION["url"]; } $dir = opendir($fname); //交给dir while($a = readdir($dir))//循环读取 { $url = $fname."/".$a; //没有这个条件，会有./..的这个路径 if($a!="." && $a!="..") { if(is_dir($url)) //判断路径是不是目录 { echo "<div class='file mulu' lj='{$url}'>{$a}</div>";//如果是目录，就进这个，起个名字，双击这个进入下一个子目录 } else { echo "<div class='file' lj='{$url}'>{$a}<input type = 'button' value = '删除' lj = '{$url}' id = 'delete'/></div>"; //如果不是目录，就进入这个。。统一的起个名字，这样好给他们写样式 } } } $fuji = dirname($fname); //文件的绝对路径 if($fname!= "./zongbiao") //判断如果不是zongbiao显示返回上一级div { echo "<div class='file prev' lj='{$fuji}' >返回上一级</div>"; } else { } closedir($dir);//关闭目录资源 ?> </body> <script type="text/javascript"> $(".mulu").dblclick(function(){ //找到这个目录加入双击事件 var url=$(this).attr("lj"); //点击这个目录找到这个目录的路径 $.ajax({ url:"chuli.php", data:{url:url},//将路径传给处理页面 type:"POST", dataType:"TEXT", success: function(data){ window.location.href="Untitled-3.php";//刷新页面 } }) }) $(".prev").dblclick(function(){ var url = $(this).attr("lj"); //找到这个div<br> //处理页面和遍历目录时的处理页面是一样的 $.ajax({ url:"chuli.php", data:{url:url}, type:"POST", dataType:"TEXT", success: function(data){ window.location.href = "Untitled-3.php"; }
})
})
处理页面
$("#new新建文件
").click(function(){ //给新建文件加上点击事件
var name = $("#name").val() //找到新建文件的名字
$.ajax({
url:"chuli1.php",
data:{name:name},
type:"POST",
dataType:"TEXT",
success: function(d){
window.location.href = "Untitled-3.php";
}
})
})
处理页面
删除文件
$(".file").click(function(){
var lj = $(this).attr("lj");
$.ajax({
url:"chuli3.php",
data:{lj:lj},
type:"POST",
dataType:"TEXT",
success: function(a){
window.location.href = "Untitled-3.php";
}
})
})
处理页面
效果图
