文件管理的练习(目录文件的打开,双击返回上一层目录、双击打开子目录文件)
文件管理的核心是要找文件的路径
例题参考的是www目录下的gongju文件夹
第一步:定义要显示的文件夹
$fname="../gongju"; /*取此文件的上级目录中的gongju文件夹*/
第二步:打开目录文件夹,并记得关闭,两个语句一起写上
$dir=opendir($fname); 内容。。。 closedir($dir);
第三步:遍历目标文件夹
$fname="../gongju"; $dir=opendir($fname); while($n=readdir($dir)) /* readdir()是读目录文件夹,读完之后,把它交给一个变量$n*/ { $url=$fname."/".$n; /* 把目录下的每个文件拼成一个完整路径*/ } closedir($dir);
第四步:拼成完整路径后,要判断一下这个文件是目录还是文件
$fname="../gongju"; $dir=opendir($fname); while($n=readdir($dir)) { $url=$fname."/".$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:35px; line-height:35px; vertical-align:middle; border:1px solid #63C; margin-top:2px;} .mulu{ background-color:#63C; color:white} .prev{ background-color:#F63; color:white}
初步效果图
第六步:加双击事件,思路是把路径传回当前页面,把$fname的值变为传回来的路径即可,传值方式除了get、post还有session
<script type="text/javascript"> $(".mulu").dblclick(function(){ var url=$(this).attr("lj"); $.ajax({ type:"post", url:"lujingchuli.php", async:true, data:{url:url}, dataType:"TEXT", success:function(data) { window.location.href="wenjiancaozuo.php"; /*指向当前页面,相当于刷新页面*/ } }); }) </script>
处理页面
<?php session_start(); $url=$_POST["url"]; $_SESSION["url"]=$url; ?>
第七步:把传回来的session里的值取到,赋值给$fname
<?php session_start(); $fname="../gongju"; if(!empty($_SESSION["url"])) { $fname=$_SESSION["url"]; } $dir=opendir($fname); while($n=readdir($dir)) { $url=$fname."/".$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); ?>
第八步:返回上一层操作
首先要判断是不是gongju这一级文件,如果是,不显示返回上一层,如果不是显示;并添加返回上一层
$fname="../gongju"; $jdlj=realpath($fname); 取fname的绝对路径 if($jdlj=="D:\\shujuku\\wamp\\www\\gongju") /*\需要\转义一下*/ { } else { $fuji=dirname($fname); /* 取点击文件的父级文件路径 */ echo "<div class='file prev' lj='{$fuji}'>返回上一级<div>"; } $dir=opendir($fname); while($n=readdir($dir)) { $url=$fname."/".$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); ?>
给返回上一层添加双击事件
$(".prev").dblclick(function(){ var url=$(this).attr("lj"); $.ajax({ type:"post", url:"lujingchuli.php", async:true, data:{url:url}, dataType:"TEXT", success:function(data) { window.location.href="wenjiancaozuo.php"; /*指向当前页面,相当于刷新页面*/ } }); })
完整步骤如下
<style type="text/css"> *{ margin:0px auto; padding:0px} .file{ width:50%; height:35px; line-height:35px; vertical-align:middle; border:1px solid #63C; margin-top:2px;} .mulu{ background-color:#63C; color:white} .prev{ background-color:#F63; color:white} </style> </head> <body> <?php session_start(); if(!empty($_SESSION["url"])) { $fname=$_SESSION["url"]; } $fname="../gongju"; $jdlj=realpath($fname); 取fname的绝对路径 if($jdlj=="D:\\shujuku\\wamp\\www\\gongju") /*\需要\转义一下*/ { } else { $fuji=dirname($fname); /* 取点击文件的父级文件路径 */ echo "<div class='file prev' lj='{$fuji}'>返回上一级<div>"; } $dir=opendir($fname); while($n=readdir($dir)) { $url=$fname."/".$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); ?> </body> </html> <script type="text/javascript"> $(".mulu").dblclick(function(){ var url=$(this).attr("lj"); $.ajax({ type:"post", url:"lujingchuli.php", async:true, data:{url:url}, dataType:"TEXT", success:function(data) { window.location.href="wenjiancaozuo.php"; /*指向当前页面,相当于刷新页面*/ } }); }) $(".prev").dblclick(function(){ var url=$(this).attr("lj"); $.ajax({ type:"post", url:"lujingchuli.php", async:true, data:{url:url}, dataType:"TEXT", success:function(data) { window.location.href="wenjiancaozuo.php"; /*指向当前页面,相当于刷新页面*/ } }); }) </script>
给文件添加删除和新建文件的操作
$jdlj = realpath($fname); if($jdlj == "D:\\wamp\\www\\1027") { } else { $fuji = dirname($fname); echo "<div class='file prev' lj='{$fuji}' >返回上一级</div>"; } //遍历文件夹 $dir = opendir($fname); while($n = readdir($dir)) { $url = $fname."/".$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} <input type='button' value='删除' lj='{$url}' class='sc'/> //添加一个删除按钮 </div>"; } } } closedir($dir); ?> <input type="text" id="name"/> <input type="button" value="新建" id="newf" /> // 新建文件夹 </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 = "test.php"; } }); }) $(".prev").dblclick(function(){ var url = $(this).attr("lj"); $.ajax({ url:"chuli.php", data:{url:url}, type:"POST", dataType:"TEXT", success: function(data){ window.location.href = "test.php"; } }); }) $(".sc").click(function(){ var lj = $(this).attr("lj"); $.ajax({ url:"shanchu.php", data:{lj:lj}, type:"POST", dataType:"TEXT", success: function(data){ window.location.href = "test.php"; } }); }) $("#newf").click(function(){ var name = $("#name").val(); $.ajax({ url:"xinjian.php", data:{name:name}, type:"POST", dataType:"TEXT", success: function(data){ window.location.href = "test.php"; } }); }) </script>
删除处理页面
<?php $lj = $_POST["lj"]; unlink($lj);
添加处理页面
<?php session_start(); $name = $_POST["name"]; $url = $_SESSION["url"]; $filename = $url."/".$name; touch($filename);