Community Learn Tools Library Leisure
search
English
Home > php教程 > php手册 > angularJS框架下的在线文件管理器

angularJS框架下的在线文件管理器

WBOY
Release： 2016-06-06 19:39:31
Original
1291 people have browsed it

为方便团队交流共享文件，借鉴慕课网上教学视频制作的一个在线文件管理器，采用现下流行的angularJS框架，实现文件的在线浏览，修改，删除，上传和下载等基本功能。未来还将添加用户权限管理，以及并发事件处理的模块。 ?php/** * @Author: qjw * @Date: 201

为方便团队交流共享文件，借鉴慕课网上教学视频制作的一个在线文件管理器，采用现下流行的angularJS框架，实现文件的在线浏览，修改，删除，上传和下载等基本功能。未来还将添加用户权限管理，以及并发事件处理的模块。

<?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=""    style="max-width:90%"  style="max-width:90%" 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 alt="angularJS框架下的在线文件管理器" >
                    <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>
Copy after login

/* 
* @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;
        }  
    }
})
Copy after login

<?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);
}

?>
Copy after login

Related labels：
angularjs comminicate team online file manager frame
source：php.cn
Previous article：ASP代码样例-S05GK接口发送短信 Next article：根据当天时间计算机本周星期天的年月日
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2210
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2362
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1974
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1860
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1926
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template