一、先做一下简单的查看文件功能,文件中的文件和文件夹都显示,但是双击文件夹可以显示下一级子目录,双击“返回上一级”就可以返回到上一级目录
(1)先将需要管理的文件遍历出来,可以加个样式
$dname="./dist"; //打开目录资源 $dir=opendir($dname); while($n=readdir($dir)) { $url=$dname."/".$n;//拼个路径 if($n!="." && $n!="..") { if(is_dir($url)) //判断路径是不是目录 { echo "<div class=‘file mulu‘ lj=‘{$url}‘>{$n}</div>";//如果是目录,就进这个,起个名字,双击这个进入下一个子目录 } else { echo "<div class=‘file‘ lj=‘{$url}‘>{$n}</div>";//如果不是目录就将它放在那。 } } } //关闭目录资源 closedir($dir);
给遍历出来的目录和文件加样式
*{margin:0px auto; padding:0px} .file{width:50%; height:30px; border:1px solid #60F} .mulu{background-color:#639; color:#FFF} .mulu:hover{cursor:pointer} .prev{background-color:#09F; color:#906} .prev:hover{cursor:pointer}
看看效果:带有背景颜色的是目录文件夹,代表下面还有文件,需要加双击事件进行下一步打开;没有背景色的就是纯文件了
(2)对遍历出来的文件中的目录加事件(双击这个目录打开子目录)
<script type="text/javascript"> //找到这个目录,然后加双击事件 $(".mulu").dblclick(function(){ var url=$(this).attr("lj");//点击这个目录,找到这个目录的路径 $.ajax({ url:"wjcl.php", data:{url:url}, type:"POST", dataType:"TEXT", success: function(data){ window.location.href="wenjianjia.php";//刷新页面 } }) })
(3)处理页面的编写(这里不能用post或是get传值了,可以用session传值方式传值)
<?php session_start(); $url = $_POST["url"]; $_SESSION["url"]=$url;
(4)处理页面结束后,也要在主页面开启session,还要判断传值是否为空,因为刚开始管理页面时没有“返回上一级”,所以要判断一下
session_start(); //要显示的文件名 $dname="./dist"; if(!empty($_SESSION["url"])) { $dname = $_SESSION["url"]; }
(5)输出“返回上一级”的div
$fuji = dirname($dname); if($dname!= "./dist") { echo "<div class=‘file prev‘ lj=‘{$fuji}‘ >返回上一级</div>"; }
第一次打开是没有返回上一级这一栏的
当打开一个文件夹的时候就有了
(6)既然有了这一栏,就可以利用这一栏进行返回上一级目录了,我们可以给这个div加双击事件,让其返回
$(".prev").dblclick(function(){ var url = $(this).attr("lj"); $.ajax({ url:"wjcl.php", data:{url:url}, type:"POST", dataType:"TEXT", success: function(data){ window.location.href = "wenjianjia.php"; } }) })
这样就可以双击返回上一级目录了。
二、再进一步管理一下文件,可以新建文件在这个文件夹中
(1)就是写个文本框,在添加个新建按钮
<div id="kuangjia"> <input type="text" id="name" /> <input type="button" value="创建" id="new" /> </div>
(2)给按钮写单击事件
$("#delete").click(function(){ var lj = $(this).attr("lj"); //alert(lj); $.ajax({ url:"deletecl.php", data:{lj:lj}, type:"POST", dataType:"TEXT", success: function(data){ window.location.href = "wenjianjia.php"; } }) })
(3)新建文件的处理页面
<?php session_start(); //开启session $name = $_POST["name"]; //获取传递过来的名字 $url = $_SESSION["url"]; //保存的路径位置 $dname = $url."/".$name; //拼保存路径 touch($dname); //新建文件方法touch()
效果:
我们添加一个
这样就创建上了。
三、下一个管理功能,删除不想要的文件
(1)添加删除按钮,在遍历文件那添加删除按钮
echo "<div class=‘file‘ lj=‘{$url}‘>{$n}<input type=‘button‘ value=‘删除‘ lj=‘{$url}‘ class=‘delete‘/></div>"; //起个名字,给他添加样式,可以让他好看一点,也是为了后面的添加事件
添加的样式
.delete{ float:right} //又浮动
删除按钮添加后的显示效果
(2)给按钮添加单击事件
$(".delete").click(function(){ var lj = $(this).attr("lj"); //alert(lj); $.ajax({ url:"deletecl.php", data:{lj:lj}, type:"POST", dataType:"TEXT", success: function(data){ window.location.href = "wenjianjia.php"; } }) })
(3)删除页面很简单,就是找到这个传值,用删除文件方法删除就可以
<?php $lj = $_POST["lj"]; unlink($lj); //删除文件的方法unlink() ?>
查看下效果,那么就删除之前新建的那个文件
时间: 2024-10-11 22:02:15