Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > php教程 > php手册 > angularJS框架下的在线文件管理器

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

WBOY
Freigeben： 2016-06-06 19:39:31
Original
1294 Leute haben es durchsucht

为方便团队交流共享文件，借鉴慕课网上教学视频制作的一个在线文件管理器，采用现下流行的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>
Nach dem Login kopieren

/* 
* @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;
        }  
    }
})
Nach dem Login kopieren

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

?>
Nach dem Login kopieren

Verwandte Etiketten：
angularjs 交流 团队 在线 文件管理器 框架
Quelle：php.cn
Vorheriger Artikel：ASP代码样例-S05GK接口发送短信 Nächster Artikel：根据当天时间计算机本周星期天的年月日
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2215
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2363
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1975
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1862
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1930
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage