masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > php教程 > php手册 > angularJS框架下的在线文件管理器

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

WBOY
Lepaskan： 2016-06-06 19:39:31
asal
1292 orang telah melayarinya

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

/* 
* @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;
        }  
    }
})
Salin selepas log masuk

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

?>
Salin selepas log masuk

Label berkaitan：
angularjs berkomunikasi pasukan dalam talian pengurus fail bingkai
sumber：php.cn
Artikel sebelumnya：ASP代码样例-S05GK接口发送短信 Artikel seterusnya：根据当天时间计算机本周星期天的年月日
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2213
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2362
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1975
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1862
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1927
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan