为方便团队交流共享文件，借鉴慕课网上教学视频制作的一个在线文件管理器，采用现下流行的angularJS框架，实现文件的在线浏览，修改，删除，上传和下载等基本功能。未来还将添加
1. [文件] filemanager.php ~ 5KB 下载(13)
<?php
/**
* @Author: qjw
* @Date: 2015-09-02 15:25:12
*/
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Online File Manager</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jquery-ui-1.10.4.custom.css" type="text/css"/>
<script src="js/angular.min.js"></script>
<script src="js/ajaxHelper.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/filemanager.js"></script>
</head>
<body ng-app="filemanager" ng-controller="filemanagerController">
<div class="container">
<div id="showDetail" style="display:none"><img src="" height="616" width="615" id="showImg" alt=""/></div>
<h1>在线文件管理器</h1>
<div class="row">
<ol class="breadcrumb col-md-9">
<li ng-repeat="item in pathway track by $index"><a href="#" ng-click="TurnTo(item)">{{item}}</a></li>
</ol>
<button type="button" title="上传" class="btn btn-default col-md-offset-1 col-md-1" ng-click="upload()">
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span>
</button>
</div>
<div class="upload" ng-show="upload_show">
<h3>请选择需要上传的文件</h3>
<form class="form-inline" action="_service_filemanager.php?action=upload" method='post' enctype="multipart/form-data">
<div class="form-group">
<input type="file" name="myfile">
</div>
<input type="hidden" name="path" value="{{path}}" />
<button style="margin-top:3px" type="submit" class="btn btn-default">上传文件</button>
<button style="margin-top:3px" class="btn btn-default" ng-click="turnback()">取消</button>
</form>
</div>
<div class="content" ng-show="content_show">
<form action='_service_filemanager.php?action=modify' method='post'>
<div class="row">
<h4 class="col-md-8">{{filename}} 文件内容</h4>
<div class="btn-group col-md-4" role="group">
<button type="submit" class="btn btn-default">提交修改</button>
<button type="button" class="btn btn-default" ng-click="turnback()">返回</button>
</div>
</div>
<div class="form-group">
<input type="hidden" name="location" value="{{location}}" />
<textarea name="newcontent" cols="180" rows="20" class="form-control">{{filecontent}}</textarea>
</div>
</form>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>类型</th>
<th>大小</th>
<th>创建时间</th>
<th>修改时间</th>
<th>访问时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in fileinfo track by $index">
<td>{{item.num}}</td>
<td>
<a href="#" ng-click="showContent(item.location,item.name,item.type)">
{{item.name}}
</a>
</td>
<td><img src="img/{{item.type}}"</td>
<td>{{item.size}}</td>
<td>{{item.createtime}}</td>
<td>{{item.modifytime}}</td>
<td>{{item.visittime}}</td>
<td>
<button type="button" title="删除" class="btn btn-default" ng-click="deletefile(item.location,item.type)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<button type="button" title="下载" class="btn btn-default" ng-click="downloadfile(item.location,item.type)">
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
2. [文件] filemanager.js ~ 4KB 下载(6)
/*
* @Author: qjw
* @Date: 2015-09-02 16:15:30
*/
angular.module('filemanager',[])
.service('data',function(){
return null;
})
.controller('filemanagerController',function($scope,$http,data){
function showDetail(t,filename){
$("#showImg").attr("src",filename);
$("#showDetail").dialog({
height:"auto",
width: "auto",
position: {my: "top", at: "center", collision:"fit"},
modal:false,//是否模式对话框
draggable:true,//是否允许拖拽
resizable:true,//是否允许拖动
title:t,//对话框标题
show:"slide",
hide:"explode"
});
}
function GetRequest(){
var url = location.search; //获取url中"?"符后的字串
url=decodeURI(url);
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request= new Object();
$scope.path='../xmues';
Request=GetRequest();
if(Request['location']){
$scope.path=Request['location'];
}
$scope.serviceURL="_service_filemanager.php";
$scope.pathway=$scope.path.split('/');
console.log($scope.path);
console.log($scope.pathway);
$scope.content_show=false;
$scope.newpath=false;
$scope.upload_show=false;
$scope.param={"action":"opendir","path":$scope.path};
getData($http, $scope.serviceURL, $scope.param, function (data) {
$scope.fileinfo=data;
console.log(data);
});
$scope.turnback=function(){
$scope.content_show=false;
$scope.upload_show=false;
}
$scope.showContent=function(location,name,type){
var typeFlag=new Array();
typeFlag=type.split('_');
if(typeFlag[0]=='file'){
var ext,flag;
var res=new Array();
var imageExt=new Array("gif","jpg","jpeg","png","psd");
res=name.split('.')
ext=res[1].toLowerCase()
flag=imageExt.indexOf(ext);
if(flag==-1){
$scope.content_show=true;
$scope.location=location;
$scope.filename=name;
$scope.param={"action":"showContent","location":$scope.location};
getData($http, $scope.serviceURL, $scope.param, function (data) {
$scope.filecontent=data;
});
}
else{
showDetail(name,location);
}
}
else{
window.location.href="filemanager.php?location="+location;
}
}
$scope.deletefile=function(location,type){
if(window.confirm("您确定要删除嘛?删除之后无法恢复哟!!!")){
var typeFlag=new Array();
typeFlag=type.split('_');
if(typeFlag[0]=='file'){
window.location.href="_service_filemanager.php?action=deletefile&location="+location;
}
else{
window.location.href="_service_filemanager.php?action=deletefolder&location="+location;
}
}
}
$scope.downloadfile=function(location,type){
window.location.href="_service_filemanager.php?action=downloadfile&location="+location;
}
$scope.upload=function(){
$scope.upload_show=true;
}
$scope.TurnTo=function(p){
if(p=='xmues'){
window.location.href="filemanager.php?location=../xmues";
}
if(p=='..'){
window.location.href="filemanager.php?location=../xmues";
}
else{
var pos,turn;
pos=$scope.path.indexOf(p)+p.length;
turn=$scope.path.slice(0, pos);
window.location.href="filemanager.php?location="+turn;
}
}
})
3. [文件] _service_filemanager.php ~ 6KB 下载(6)
<?php
/**
* @Author: qjw
* @Date: 2015-09-02 15:31:31
*/
function readDirectory($path){
$handle=opendir($path);
$arr['file'][]=NULL;
$arr['dir'][]=NULL;
while(($item=readdir($handle))!==false){
if($item!="."&&$item!=".."){
$item = iconv('UTF-8','GBK//ignore', $item);
if(is_file($path."/".$item)){
$arr['file'][]=$item;
}
if(is_dir($path."/".$item)){
$arr['dir'][]=$item;
}
}
}
closedir($handle);
return $arr;
}
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];
}
function delFile($filename){
if(unlink($filename)){
$mes="文件删除成功";
}else{
$mes="文件删除失败";
}
return $mes;
}
function downFile($filename){
header("content-disposition:attachment;filename=".basename($filename));
header("content-length:".filesize($filename));
readfile($filename);
}
function dirSize($path){
$sum=0;
global $sum;
$handle=opendir($path);
while(($item=readdir($handle))!==false){
if($item!="."&&$item!=".."){
if(is_file($path."/".$item)){
$sum+=filesize($path."/".$item);
}
if(is_dir($path."/".$item)){
$func=__FUNCTION__;
$func($path."/".$item);
}
}
}
closedir($handle);
return $sum;
}
function delFolder($path){
$handle=opendir($path);
while(($item=readdir($handle))!==false){
if($item!="."&&$item!=".."){
if(is_file($path."/".$item)){
unlink($path."/".$item);
}
if(is_dir($path."/".$item)){
$func=__FUNCTION__;
$func($path."/".$item);
}
}
}
closedir($handle);
rmdir($path);
return "文件夹删除成功";
}
function getExt($filename){
return strtolower(pathinfo($filename,PATHINFO_EXTENSION));
}
function uploadFile($fileInfo,$path,$allowExt=array("gif","jpeg","jpg","png","txt"),$maxSize=10485760){
print_r($fileInfo);
if($fileInfo['error']==UPLOAD_ERR_OK){
if(is_uploaded_file($fileInfo['tmp_name'])){
$ext=getExt($fileInfo['name']);
$destination=$path."/".pathinfo($fileInfo['name'],PATHINFO_FILENAME).".".$ext;
if(in_array($ext,$allowExt)){
if($fileInfo['size']<=$maxSize){
if(move_uploaded_file($fileInfo['tmp_name'], $destination)){
$mes="文件上传成功";
}else{
$mes="文件移动失败";
}
}else{
$mes="文件过大";
}
}else{
$mes="非法文件类型";
}
}else{
$mes="文件不是通过HTTP POST方式上传上来的";
}
}else{
switch($fileInfo['error']){
case 1:
$mes="超过了配置文件的大小";
break;
case 2:
$mes="超过了表单允许接收数据的大小";
break;
case 3:
$mes="文件部分被上传";
break;
case 4:
$mes="没有文件被上传";
break;
}
}
return $mes;
}
function alertMes($mes,$back){
echo "<script type='text/javascript'>alert('{$mes}');location.href='filemanager.php?location={$back}';</script>";
}
header("Content-type: text/html; charset=utf-8");
mysql_query("SET NAMES 'utf8'");
$action=$_REQUEST["action"];
if($action=="opendir"){
$path=$_GET["path"];
$content=readDirectory($path);
$i=0;
$fileinfo=null;
if($content['dir']){
foreach ($content['dir'] as $val) {
if($val){
$p=$path."/".$val;
$fileinfo[$i]['num']=$i+1;
$fileinfo[$i]['name']=$val;
$fileinfo[$i]['type']=filetype($p)=='file'?'file_ico.png':'folder_ico.png';
$sum=0;
$fileinfo[$i]['size']=transByte(dirSize($p));
$fileinfo[$i]['createtime']=date("Y-m-d H:i:s",filectime($p));
$fileinfo[$i]['modifytime']=date("Y-m-d H:i:s",filemtime($p));
$fileinfo[$i]['visittime']=date("Y-m-d H:i:s",fileatime($p));
$fileinfo[$i]['location']=$p;
$i=$i+1;
}
}
}
if($content['file']){
foreach ($content['file'] as $val) {
if($val){
$p=$path.'/'.$val;
$fileinfo[$i]['num']=$i+1;
$fileinfo[$i]['name']=$val;
$fileinfo[$i]['type']=filetype($p)=='file'?'file_ico.png':'folder_ico.png';
$fileinfo[$i]['size']=transByte(filesize($p));
$fileinfo[$i]['createtime']=date("Y-m-d H:i:s",filectime($p));
$fileinfo[$i]['modifytime']=date("Y-m-d H:i:s",filemtime($p));
$fileinfo[$i]['visittime']=date("Y-m-d H:i:s",fileatime($p));
$fileinfo[$i]['location']=$p;
$i=$i+1;
}
}
}
if($fileinfo){
echo json_encode($fileinfo);
}
}
else if($action=="showContent"){
$location=$_GET['location'];
$content=file_get_contents($location);
if(strlen($content)){
echo $content;
}
}
else if($action=="modify"){
$location=$_REQUEST['location'];
$newcontent=$_REQUEST['newcontent'];
$back=dirname($location);
if(file_put_contents($location,$newcontent)){
$mes="文件修改成功";
}else{
$mes="文件修改失败";
}
alertMes($mes,$back);
}
else if($action=="deletefile"){
$location=$_REQUEST['location'];
$back=dirname($location);
$mes=delFile($location);
alertMes($mes,$back);
}
else if($action=="deletefolder"){
$location=$_REQUEST['location'];
$back=dirname($location);
$mes=delFolder($location);
alertMes($mes,$back);
}
else if($action=="downloadfile"){
$location=$_REQUEST['location'];
downFile($location);
}
else if($action=="upload"){
$fileInfo=$_FILES['myfile'];
$path=$_REQUEST['path'];
$mes=uploadFile($fileInfo,$path);
alertMes($mes, $path);
}
?>