Web 在线文件管理器学习笔记与总结（2）显示文件列表（名称，类型，大小，可读，可写，可执行，创建时间，修改时间，访问时间）
主要函数：
filetype() 判断文件类型
filesize() 得到文件大小（字节）
is_readable() 判断文件是否可读
is_writeable() 判断文件是否可写
is_executable() 判断文件是否可执行
filectime() 文件创建时间
filemtime() 文件修改时间
fileatime() 文件访问时间
file.func.php 封装文件操作的文件：
<?php /* 转换字节大小 */ function transByte($size){ $arr = array('B','KB','MB','GB','TB','EB'); $i = 0; while($size > 1024){ $size /= 1024; $i++; } return round($size,2).' '.$arr[$i]; }
index.php:
1 <?php 2 require 'dir.func.php'; 3 require 'file.func.php'; 4 $path = 'file'; 5 $info = readDirectory($path); 6 ?> 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="UTF-8"> 11 <title>Insert title here</title> 12 <link rel="stylesheet" href="cikonss.css" /> 13 <link rel="stylesheet" href="common.css" /> 14 </head> 15 <body> 16 <h1>在线文件管理器</h1> 17 <div id="top"> 18 <ul id="navi"> 19 <li><a href="index.php" title="主目录"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-home"></span></span></a></li> 20 <li><a href="#" title="新建文件" ><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-file"></span></span></a></li> 21 <li><a href="#" title="新建文件夹"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-folder"></span></span></a></li> 22 <li><a href="#" title="上传文件"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-upload"></span></span></a></li> 23 <li><a href="#" title="返回上级目录"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-arrowLeft"></span></span></a></li> 24 </ul> 25 </div> 26 <table width='100%' border='1' cellpadding="5" cellspacing="0" bgcolor="#abcdef" align="center"> 27 <tr align="center"> 28 <td>编号</td> 29 <td>名称</td> 30 <td>类型</td> 31 <td>大小</td> 32 <td>可读</td> 33 <td>可写</td> 34 <td>可执行</td> 35 <td>创建时间</td> 36 <td>修改时间</td> 37 <td>访问时间</td> 38 <td>操作</td> 39 </tr> 40 <?php 41 if($info['file']){ 42 $i = 1; 43 foreach($info['file'] as $val){ 44 $p = $path.'/'.$val; 45 ?> 46 <tr align="center"> 47 <td><?php echo $i;?></td> 48 <td><?php echo $val;?></td> 49 <td><?php $src = filetype($p) == 'file'?'file_ico.png':'folder_ico.png';?><img src="images/<?php echo $src;?>" alt="" title='文件'></td> 50 <td><?php echo transByte(filesize($p));?></td> 51 <td><?php $src = is_readable($p)?'correct.png':'error.png';?><img src="images/<?php echo $src;?>" width="32" alt="" title='可读'></td> 52 <td><?php $src = is_writeable($p)?'correct.png':'error.png';?><img src="images/<?php echo $src;?>" width="32" alt="" title='可写'></td> 53 <td><?php $src = is_executable($p)?'correct.png':'error.png';?><img src="images/<?php echo $src;?>" width="32" alt="" title='可写'></td> 54 <td><?php echo date('Y-m-d H:i:s',filectime($p));?></td> 55 <td><?php echo date('Y-m-d H:i:s',filemtime($p));?></td> 56 <td><?php echo date('Y-m-d H:i:s',fileatime($p));?></td> 57 <td> 58 <a href="" title='查看'><img src="images/show.png" width="32" alt=""></a> 59 <a href="" title='修改'><img src="images/edit.png" width="32" alt=""></a> 60 <a href="" title='重命名'><img src="images/rename.png" width="32" alt=""></a> 61 <a href="" title='复制'><img src="images/copy.png" width="32" alt=""></a> 62 <a href="" title='剪切'><img src="images/cut.png" width="32" alt=""></a> 63 <a href="" title='删除'><img src="images/delete.png" width="32" alt=""></a> 64 <a href="" title='下载'><img src="images/download.png" width="32" alt=""></a> 65 </td> 66 </tr> 67 <?php 68 $i++; 69 } 70 } 71 ?> 72 </table> 73 </body> 74 </html>
common.css:
body,p,div,ul,ol,table,dl,dd,dt{ margin:0; padding: 0; } a{ text-decoration: none; } ul,li{ list-style: none; float: left; } #top{ width:100%; height:48px; margin:0 auto; background: #E2E2E2; } #navi a{ display: block; width:48px; height: 48px; } #main{ margin:0 auto; border:2px solid #ABCDEF; } .small{ width:25px; height:25px; border:0; }
cikonss.css：
/* * Cikonss v1.0 * * URL: https://github.com/zzap/Cikonss * License: MIT License * */ /* Generals */ .icon { /* don't change width and height in order to change the size of the icon, you can control the size with font-size for different class(es) - below */ line-height: 100%; width: 1em; height: 1em; position: relative; display: block; float: left; } /* Button like icons */ .icon-square, .icon-rounded { border: .75em solid rgb(242, 242, 242); /* #f2f2f2 */ background-color: rgb(242, 242, 242); /* #f2f2f2 */ margin: 0 .5em .5em 0; /* for browsers that supports */ -webkit-box-shadow: 0 0 0 .0625em rgb(226, 226, 226); /* #e2e2e2 */ -moz-box-shadow: 0 0 0 .0625em rgb(226, 226, 226); /* #e2e2e2 */ box-shadow: 0 0 0 .0625em rgb(226, 226, 226); /* #e2e2e2 */ } .icon-rounded { border-radius: 1.5em; } /* * Sizes * * 5 preset sizes, simply change the font-size or add your custom class. * */ .icon-small { font-size: 1em; } .icon-mid { font-size: 2em; } .icon-large { font-size: 4em; } .icon-extra-large { font-size: 8em; } .icon-huge { font-size: 12em; } /* * Icons * * Icons are somewhat grouped so that you can easily pick the ones you like * if the whole file is too large for your project. * */ /* Home */ .icon-home { position: absolute; top: 0; left: .125em; width: .25em; height: .5em; background-color: rgb(102, 102, 102); /* #666 */ } .icon-home:before, .icon-home:after { content: ""; position: absolute; border-style: solid; } .icon-home:before { top: .5em; left: 0; width: .25em; height: .3125em; border-width: .1875em .25em 0 .25em; border-color: rgb(102, 102, 102); /* #666 */ } .icon-home:after { top: -.5em; left: -.125em; width: 0; height: 0; border-width: .5em; border-color: transparent transparent rgb(102, 102, 102) transparent; /* #666 */ } /* Arrows */ .icon-arrowRight, .icon-arrowLeft, .icon-arrowDown, .icon-arrowUp { position: absolute; width: .5em; height: .5em; background-color: rgb(102, 102, 102); /* #666 */ } .icon-arrowRight:after, .icon-arrowLeft:after, .icon-arrowDown:after, .icon-arrowUp:after { content: ""; position: absolute; width: 0; height: 0; border-width: .5em; border-style: solid; } /* Arrows - Left and Right */ .icon-arrowRight, .icon-arrowLeft { top: .25em; } .icon-arrowRight { left: 0; } .icon-arrowLeft { right: 0; } .icon-arrowRight:after, .icon-arrowLeft:after { top: -.25em; } .icon-arrowRight:after { left: .5em; border-color: transparent transparent transparent rgb(102, 102, 102); /* #666 */ } .icon-arrowLeft:after { right: .5em; border-color: transparent rgb(102, 102, 102) transparent transparent; /* #666 */ } /* Arrows - Down and Up */ .icon-arrowDown, .icon-arrowUp { left: .25em; } .icon-arrowDown { top: 0; } .icon-arrowUp, .icon-arrowDown:after { top: .5em; } .icon-arrowDown:after, .icon-arrowUp:after { left: -.25em; } .icon-arrowDown:after { border-color: rgb(102, 102, 102) transparent transparent transparent; /* #666 */ } .icon-arrowUp:after { top: -1em; border-color: transparent transparent rgb(102, 102, 102) transparent; /* #666 */ } /* Comments */ .icon-comment, .icon-comment-text { position: absolute; top: 0; left: 0; width: 1em; height: .75em; background-color: rgb(102, 102, 102); /* #666 */ /* for browsers that supports */ border-radius: .125em; } .icon-comment:after, .icon-comment-text:before, .icon-comment-text:after { content: ""; position: absolute; border-style: solid; } .icon-comment-text:before { top: .1875em; left: .125em; width: .75em; height: .125em; border-width: .09375em 0; border-color: rgb(249, 249, 249); /* #f9f9f9 */ } .icon-comment:after, .icon-comment-text:after { top: .75em; left: .25em; width: 0; height: 0; border-width: .125em; border-color: rgb(102, 102, 102) transparent transparent rgb(102, 102, 102); /* #666 */ } /* Mail */ .icon-mail { position: absolute; top: .15625em; left: 0; width: 1em; height: .75em; background-color: rgb(102, 102, 102); /*#666*/ } .icon-mail:before, .icon-mail:after { content: ""; position: absolute; left: 0; width: 0; height: 0; border-width: .4em .5em; border-style: solid; } .icon-mail:before { top: 0; border-color: rgb(249, 249, 249) transparent transparent transparent; /* #f9f9f9 */ } .icon-mail:after { top: -.0625em; border-color: rgb(102, 102, 102) transparent transparent transparent; /* #666 */ } /* Calendar */ .icon-calendar{ position: absolute; top: .125em; left: 0; width: .875em; height: .6875em; border-width: .125em .0625em .0625em .0625em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ background-color: rgb(249, 249, 249); /* #f9f9f9 */ /* for browsers that supports */ border-radius: .0625em; } .icon-calendar:before{ content: ""; position: absolute; top: -.25em; left: .125em; width: .375em; height: .125em; border-width: 0 .125em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ } .icon-calendar:after{ content: "15"; position: absolute; top: -.25em; left: .25em; font-family: Arial, sans-serif; font-size: .5em; font-weight: bold; color: rgb(102, 102, 102); /* #666 */ } /* Plus */ .icon-plus, .icon-plus:after { position: absolute; width: .375em; height: .375em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ } .icon-plus { top: 0; left: 0; border-width: 0 .25em .25em 0; } .icon-plus:after { content: ""; top: .375em; left: .375em; border-width: .25em 0 0 .25em; } /* Minus */ .icon-minus { position: absolute; top: .375em; left: 0; width: 1em; height: .25em; background-color: rgb(102, 102, 102); /* #666 */ } /* File */ .icon-file { position: absolute; top: 0; left: .125em; width: .5em; height: .75em; border-width: .125em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ background-color: rgb(249, 249, 249); /* #f9f9f9 */ /* for browsers that supports */ border-radius: .0625em; } .icon-file:before { content: ""; position: absolute; top: -.125em; left: -.125em; width: 0; height: 0; border-width: .15625em; border-style: solid; border-color: rgb(255, 255, 255) rgb(102, 102, 102) rgb(102, 102, 102) rgb(255, 255, 255); /* #fff and #666 - #fff has to mach body bg*/ } .icon-square .icon-file:before, .icon-rounded .icon-file:before { border-color: rgb(242, 242, 242) rgb(102, 102, 102) rgb(102, 102, 102) rgb(242, 242, 242); /* #f2f2f2 and #666 - #f2f2f2 has to mach with .icon-square and .icon-rounded bg*/ } /* Folder */ .icon-folder { position: absolute; top: .125em; left: 0; width: 1em; height: .875em; background-color: rgb(102, 102, 102); /* #666 */ /* for browsers that supports */ border-bottom-left-radius: .0625em; border-bottom-right-radius: .0625em; } .icon-folder:before { content: ""; position: absolute; top: -.125em; left: .125em; width: .375em; height: .125em; background-color: rgb(102, 102, 102); /* #666 */ /* for browsers that supports */ border-top-left-radius: .0625em; border-top-right-radius: .0625em; } /* Tag */ .icon-tag { position: absolute; top: 0; left: .25em; width: .5em; height: .75em; background-color: rgb(102, 102, 102); /* #666 */ /* for browsers that supports */ border-top-left-radius: .0625em; border-top-right-radius: .0625em; } .icon-tag:before, .icon-tag:after { content: ""; position: absolute; top: .75em; width: 0; height: 0; border-width: .125em; border-style: solid; } .icon-tag:before { left: 0; border-color: rgb(102, 102, 102) transparent transparent rgb(102, 102, 102); /* #666 */ } .icon-tag:after { left: .25em; border-color: rgb(102, 102, 102) rgb(102, 102, 102) transparent transparent; /* #666 */ } /* Desktop */ .icon-desktop { position: absolute; top: 0; left: 0; width: .875em; height: .625em; border-width: .0625em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ background-color: rgb(249, 249, 249); /* #f9f9f9 */ /* for browsers that supports */ border-radius: .0625em; } .icon-desktop:before, .icon-desktop:after { content: ""; position: absolute; background-color: rgb(102, 102, 102); /* #666 */ } .icon-desktop:before { top: .6875em; left: .3125em; width: .25em; height: .1875em; } .icon-desktop:after { top: .875em; left: .125em; width: .625em; height: .0625em; } /* Tablet */ .icon-tablet { position: absolute; top: .0625em; left: 0; width: .75em; height: .625em; border-width: .125em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ background-color: rgb(249, 249, 249); /* #f9f9f9 */ /* for browsers that supports */ border-radius: .0625em; } .icon-tablet:before { content: ""; position: absolute; top: .28125em; left: -.09375em; width: .0625em; height: .0625em; background-color: rgb(255, 255, 255); /* #fff */ /* for browsers that supports */ border-radius: .0625em; } /* Phone */ .icon-phone { position: absolute; top: 0; left: .1875em; width: .5em; height: .75em; border-width: .125em .0625em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ background-color: rgb(249, 249, 249); /* #f9f9f9 */ /* for browsers that supports */ border-radius: .0625em; } .icon-phone:after { content: ""; position: absolute; top: .78125em; left: .21875em; width: .0625em; height: .0625em; background-color: rgb(255, 255, 255); /* #fff */ /* for browsers that supports */ border-radius: .0625em; } /* Menu */ .icon-menu, .icon-menu:before, .icon-menu:after { position: absolute; left: 0; width: 1em; height: .25em; background-color: rgb(102, 102, 102); /* #666 */ } .icon-menu { top: .0625em; } .icon-menu:before { content: ""; top: .3125em; } .icon-menu:after { content: ""; top: .625em; } /* Download and Upload */ .icon-download, .icon-upload { position: absolute; left: .375em; width: .25em; height: .5em; background-color: rgb(102, 102, 102); /* #666 */ } .icon-download { top: 0; } .icon-upload { top: .25em; } .icon-download:before, .icon-upload:before { content: ""; position: absolute; left: -.125em; width: 0; height: 0; border-width: .25em; border-style: solid; } .icon-download:before { top: .5em; border-color: rgb(102, 102, 102) transparent transparent transparent; /* #666 */ } .icon-upload:before { top: -.5em; border-color: transparent transparent rgb(102, 102, 102) transparent; /* #666 */ } .icon-download:after, .icon-upload:after { content: ""; position: absolute; left: -.375em; width: .75em; height: .125em; border-width: 0 .125em .125em .125em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ } .icon-download:after { top: .75em; } .icon-upload:after { top: .5em; } /* Page Templates */ .icon-tpl-full, .icon-tpl-side-r, .icon-tpl-side-l { position: absolute; top: 0; left: 0; width: 1em; height: .25em; background-color: rgb(102, 102, 102); } .icon-tpl-full:after, .icon-tpl-side-r:before, .icon-tpl-side-r:after, .icon-tpl-side-l:before, .icon-tpl-side-l:after { content: ""; position: absolute; top: .3125em; height: .6875em; background-color: rgb(102, 102, 102); } .icon-tpl-full:after, .icon-tpl-side-r:before, .icon-tpl-side-l:before { left: 0; } .icon-tpl-full:after { width: 1em; } .icon-tpl-side-r:before, .icon-tpl-side-l:after { width: .6875em; } .icon-tpl-side-r:after, .icon-tpl-side-l:before { width: .25em; } .icon-tpl-side-r:after { left: .75em; } .icon-tpl-side-l:after { left: .3125em; } /* Views */ /* List view */ .icon-list-view, .icon-list-view:before, .icon-list-view:after { position: absolute; width: .0625em; height: .25em; border-width: 0 .6875em 0 .25em; border-style: solid; border-color: rgb(102, 102, 102); } .icon-list-view { top: .0625em; left: 0; } .icon-list-view:before, .icon-list-view:after { content: ""; left: -.25em; } .icon-list-view:before { top: .3125em; } .icon-list-view:after { top: .625em; } /* Grid view */ .icon-grid-view, .icon-grid-view:before { position: absolute; width: .0625em; height: .46875em; border-width: 0 .46875em; border-style: solid; border-color: rgb(102, 102, 102); } .icon-grid-view { top: 0; left: 0; } .icon-grid-view:before { content: ""; top: .53125em; left: -.46875em; } /* Camera */ .icon-camera { position: absolute; top: .25em; left: 0; width: .75em; height: .5em; background-color: rgb(102, 102, 102); /* #666 */ } .icon-camera:after { content: ""; position: absolute; top: 0; left: .5em; width: 0; height: 0; border-width: .25em; border-style: solid; border-color: transparent rgb(102, 102, 102) transparent transparent; /* #666 */ } /* Image */ .icon-image { position: absolute; top: .125em; left: 0; width: .875em; height: .625em; border-width: .0625em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ /* for browsers that supports */ border-radius: .0625em; } .icon-image:before, .icon-image:after { content: ""; position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; border-color: transparent transparent rgb(102, 102, 102) transparent; /* #666 */ } .icon-image:before { left: 0; border-width: .25em .25em .125em .125em; } .icon-image:after { right: 0; border-width: .25em .25em .375em .375em; } /* Player controls */ /* Play */ .icon-play { position: absolute; top: 0; left: .1875em; width: 0; height: 0; border-width: .5em .625em; border-style: solid; border-color: transparent transparent transparent rgb(102, 102, 102); /* #666 */ } /* Stop */ .icon-stop { position: absolute; top: .0625em; left: .0625em; width: .875em; height: .875em; background-color: rgb(102, 102, 102); /* #666 */ } /* Pause */ .icon-pause, .icon-pause:after { position: absolute; width: .25em; height: .875em; background-color: rgb(102, 102, 102); /* #666 */ } .icon-pause { top: .0625em; left: .21875em; } .icon-pause:after { content: ""; top: 0; left: .3125em; } /* Forward, Next, Rewind and Prev */ .icon-forward, .icon-next, .icon-rewind, .icon-prev, .icon-forward:after, .icon-next:before, .icon-rewind:after, .icon-prev:before { position: absolute; width: 0; height: 0; border-width: .4375em; border-style: solid; } .icon-forward, .icon-next, .icon-rewind, .icon-prev { top: .0625em; } .icon-forward:after, .icon-next:before, .icon-rewind:after, .icon-prev:before, .icon-next:after, .icon-prev:after { content: ""; top: -.4375em; } .icon-forward, .icon-next, .icon-forward:after, .icon-next:before { border-color: transparent transparent transparent rgb(102, 102, 102); /* #666 */ } .icon-rewind, .icon-prev, .icon-rewind:after, .icon-prev:before { border-color: transparent rgb(102, 102, 102) transparent transparent; /* #666 */ } .icon-forward { left: .0625em; } .icon-rewind { right: .0625em; } .icon-next, .icon-forward:after, .icon-next:before { left: 0; } .icon-prev, .icon-rewind:after, .icon-prev:before { right: 0; } .icon-next:after, .icon-prev:after { position: absolute; width: .125em; height: .875em; background-color: rgb(102, 102, 102); /* #666 */ } .icon-next:after { left: .4375em; } .icon-prev:after { right: .4375em; } /* Stats */ .icon-stats, .icon-stats:before { position: absolute; width: .3125em; border-width: 0 .1875em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ } .icon-stats { top: 0; left: 0; height: .875em; } .icon-stats:before { content: ""; top: .3125em; left: .0625em; height: .5625em; } .icon-stats:after { content: ""; position: absolute; top: .875em; left: -.1875em; width: 1em; height: .125em; background-color: rgb(102, 102, 102); /* #666 */ } /* Battery */ .icon-battery-empty, .icon-battery-1_4, .icon-battery-half, .icon-battery-3_4, .icon-battery-full { position: absolute; top: .25em; left: 0; width: .75em; height: .375em; border-width: .0625em; border-style: solid; border-color: rgb(102, 102, 102); /* #666 */ background-color: rgb(249, 249, 249); /* #f9f9f9 */ } .icon-battery-empty:after, .icon-battery-1_4:after, .icon-battery-half:after, .icon-battery-3_4:after, .icon-battery-full:after { content: ""; position: absolute; top: .0625em; left: .8125em; width: .125em; height: .25em; background-color: rgb(102, 102, 102); /* #666 */ } .icon-battery-1_4:before, .icon-battery-half:before, .icon-battery-3_4:before, .icon-battery-full:before { content: ""; position: absolute; top: 0; left: 0; height: .375em; background-color: rgb(153, 153, 153); /* #999 */ } .icon-battery-1_4:before { width: .1875em; } .icon-battery-half:before { width: .375em; } .icon-battery-3_4:before { width: .5625em; } .icon-battery-full:before { width: .75em; } /* Sound */ .icon-sound-mute, .icon-sound-normal, .icon-sound-loud { position: absolute; top: .375em; left: .09375em; width: .25em; height: .25em; background-color: rgb(102, 102, 102); } .icon-sound-mute:before, .icon-sound-normal:before, .icon-sound-loud:before { content: ""; position: absolute; top: -.3125em; left: -.3125em; width: .375em; height: .375em; border-width: .25em; border-style: solid; border-color: transparent rgb(102, 102, 102) transparent transparent; } .icon-sound-normal:after, .icon-sound-loud:after { content: ""; position: absolute; top: -.125em; left: .625em; width: .0625em; height: .53125em; border-style: solid; border-color: rgb(102, 102, 102); } .icon-sound-normal:after { border-width: 0 0 0 .0625em; } .icon-sound-loud:after { border-width: 0 .0625em; }