1. 首页
  2. 文章
  3. PHP

Layui框架+PHP打造个人简易版网盘系统

Android大师 74 阅读 0 评论

网盘系统

 

大家应该都会注册过致命的一些网盘~如百度云。百科介绍：网盘，又称网络U盘、网络硬盘，是由互联网公司推出的在线存储服务，服务器机房为用户划分一定的磁盘空间，为用户免费或收费提供文件的存储、访问、备份、共享等文件管理等功能，并且拥有高级的世界各地的容灾备份。

我也一直在用网盘。。但是有一个特别让人无语的是你不开他家的会员，就给你限速。那下载速度简直跟乌龟似得~~

周末在家无聊突发奇想~自己用Layui这款前端框架配合PHP做了一个简易版的网盘。后续也有想法继续去更新完善它，大家有什么想法和建议可以在下方留言！

 

1
登录注册页
 
登录注册页不是今天的重点，直接贴上我之前做过的页面代码，之前使用bootstrap做的懒得再做新的了直接拿过来用~~
登录：
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;
                background-color: #CCCCCC;
            }
            .panel{
                width: 380px;
                height: 280px;
                position: absolute;
                left: 50%;
                margin-left: -190px;
                top: 50%;
                margin-top: -140px;
            }
            .form-horizontal{
                padding: 10px 20px;
            }
            .btns{
                display: flex;
                justify-content: center;
            }
        </style>
    </head>
    
    
    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">用户登录</div>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" name="userName"/>
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" name="pwd"/>
                    </div>
                    
                    <div class="form-group btns">
                        <input type="button" class="btn btn-primary" value="登录系统" id="submit"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a type="button" class="btn btn-success" href="reg.php"/>注册账号</a>
                    </div>
                    
                </form>
            </div>
        </div>
    </body>
    
    <script src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#submit").click(function(){
                var str = $("form").serialize();
                $.post("admin/doLogin.php",{"user":str},function(data){
                    if (data=="true") {
                        alert("登录成功");
                        location = "index.html?loginUser="+$("input[name='userName']").val();
                    }else{
                        alert("登录失败");
                    }
                });
            });
        });
    </script>
</html>
复制代码
复制代码
<?php 
header ( "Content-Type:text/html;charset = utf-8");
    // username=lisi&pwd=123
    //处理登录信息
    list($username,$pwd) = explode("&", $_POST["user"]);
    list(,$username) = explode("=", $username);
    list(,$pwd) = explode("=", $pwd);
    $str = file_get_contents("user.txt");
    
    //将每个人的信息分开，并存入数组
    $user = explode("<=>", $str);
    
    // 验证登录信息
    foreach ($user as $user) {
        // 遍历数组，将每个人的信息，进行分割，并进行对比
        list($realName,$realPwd) = explode("&",$user);
        list(,$realName) = explode("=", $realName);
        list(,$realPwd) = explode("=", $realPwd);
        //验证
        if($username == $realName && $pwd == $realPwd)
            die("true");
    }
    die("false");
复制代码

注册：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;
                background-color: #CCCCCC;
            }
            .panel{
                width: 380px;
                height: 350px;
                position: absolute;
                left: 50%;
                margin-left: -190px;
                top: 50%;
                margin-top: -175px;
            }
            .form-horizontal{
                padding: 10px 20px;
            }
            .btns{
                display: flex;
                justify-content: center;
            }
        </style>
    </head>
    
    
    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">用户注册</div>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" name="userName"/>
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" name="pwd" />
                    </div>
                    <div class="form-group">
                        <label>确认密码</label>
                        <input type="password" class="form-control" name="rePwd" />
                    </div>
                    
                    <div class="form-group btns">
                        <input type="button" class="btn btn-primary" value="确定注册" id="submit"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a type="button" class="btn btn-success" href="login.php"/>返回登录</a>
                    </div>
                    
                </form>
            </div>
        </div>
    </body>
    
    <script src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#submit").on("click",function(){
                var str = $("form").serialize();
                console.log(str);
                $.post("admin/doReg.php",{"user":str},function(data){
                    if(data=="true"){
                        alert("注册成功！即将跳转登陆页！");
                        location = "login.php";
                    }else{
                        alert("注册失败！因为啥我不知道！");
                    }
                });
            });
        });
    </script>
</html>
复制代码
复制代码
<?php 
    header ( "Content-Type:text/html;charset = utf-8");
    
    $user = $_POST["user"]."<=>";
    
    $num = file_put_contents("user.txt", $user,FILE_APPEND);
    
    if($num>0) echo "true";
    else echo "false";
复制代码
 

 

2
网盘主界面布局
 
比较匆忙~网盘界面比较简陋~~~用的Layui做的。layUI在做后台项目上感觉要比bootstrap要好一些的~
复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>XX网盘</title>
  <link rel="stylesheet" href="css/layui.css">
  <style type="text/css">
            iframe{
                display: block;
                width: 100%;
                height: 500px;
                border: hidden;
                margin: 0px auto;
                position: absolute;
            }
        </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">XX云盘</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;" class="text1">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          
        </a>
      </li>
      <li class="layui-nav-item"><a href="login.php">退出</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">文件上传</a>
          <dl class="layui-nav-child">
            <dd><a href="">上传文件</a></dd>
            <dd><a onclick="func('http://www.baidu.com')">上传图片</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body" style="background-color: #F7F8F9;">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;background-color: #F7F8F9;">
            <iframe  scrolling="no" src="html/uploadFile.html" scrd id="iframe"></iframe>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script src="js/layui.js"></script>
<script src="js/jquery-3.1.1.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>
<script type="text/javascript">
        function func(url){
            document.getElementById("iframe").src = url;
        }
</script>
</body>
</html>
复制代码
 

 

2
上传
 
重点功能来了~~
文件上传是靠PHP来实现的。我在的时候特别注意了可以多文件上传：可以Ctrl多个文件选择
 

 

OK！看代码，具体实现的步骤写在注释里了：

复制代码
<?php

    header("Content-Type:text/html;charset=utf-8");
    $count = count($_FILES["file"]["name"]);
    for($i=0; $i<$count; $i++){
        // 取到文件名，并用.分割为数组
        $arr = explode(".", $_FILES['file']['name'][$i]);
        // 取到数组最后一个即为后缀名
        $type = $arr[count($arr)-1];
        // 使用原文件名+当前时间+随机数，生成新文件名
        $fileName = $arr[0].date("YmdHis").rand(100, 999).".".$type;
        $fileName = iconv("UTF-8", "GBK", $fileName);
        // 检测文件是否为合法上传文件
        if(!is_uploaded_file($_FILES['file']['tmp_name'][$i])){
            echo("文件【{$_FILES['file']['name'][$i]}】不是合法上传文件！<br>");
            continue;
        }
        // 将临时文件，移动到指定文件夹下
        $isOk = move_uploaded_file($_FILES['file']['tmp_name'][$i], "../upload/{$fileName}");
        if(!$isOk){
            echo("文件【{$_FILES['file']['name'][$i]}】上传失败！<br>");
            continue;
        }
        //echo "文件【{$_FILES['file']['name'][$i]}】上传成功！<br>";
        echo "<script type='text/javascript'>alert('文件【{$_FILES['file']['name'][$i]}】上传成功！');</script>";
        echo "<script type='text/javascript'> window.location.assign('../html/uploadFile.html')</script>";
    }
复制代码

 

以下是HTML代码：（我是将代码用ifarm标签嵌入到网盘主界面的）：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/layui.css"/>
        <style type="text/css">
            iframe{
                display: block;
                width: 80%;
                height: 300px;
                border: hidden;
                margin: 0px auto;
                position: absolute;
            }
            body{
                background-color: #F7F8F9;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>请选择上传到服务器的文件</h1>
            <form action="../admin/doUpload.php" method="post" enctype="multipart/form-data">
                <input type="file" name="file[]" multiple="multiple" />            
                <input type="submit" value="点击上传"     class="layui-btn layui-btn-normal"/>            
            </form>
        </div>
        <iframe  scrolling="no" src="../admin/file.php" scrd id="iframe1"></iframe>
    </body>
</html>
复制代码
 

 

3
显示文件列表
 
文件上传后，在网盘主界面显示上传文件的列表，以下是代码：
复制代码
<?php

    header("Content-Type:text/html;charset=utf-8");
    /*读取一个文件目录，并将目录中的文件夹和文件分类罗列；*/
    $dir = "../upload";
    $dir = iconv("UTF-8", "GBK", $dir);
    $res = opendir($dir);
    $files = [];
    $dirs = [];
    while($f = readdir($res)){
        if($f=="." || $f=="..") continue;
        $f = iconv("GBK", "UTF-8", $f);
        $f1 = iconv("UTF-8", "GBK", $dir."/".$f);
        if(is_file($f1)){
            $files[] = $f;
        }elseif(is_dir($f1)){
            $dirs[] = $f;
        }
    }
    
    echo "<h2>所有文件：</h2>";
    echo "<hr />";
    foreach ($files as $key => $value) {
        echo '<a href="process.php?filename=' . $value . '">' . $value . '</a>';
        echo '<br />';
    }
复制代码
 

 

5
大体功能展示以及下个版本要完善的功能假想~~
 
主界面：

 

下载文件直接点击文件名就可以下载

 

后面我想添加一个上传图片，类似图床的功能~以及上传视频在线观看~

大家如果有什么好的建议欢迎在下边留言~

附GIT仓库地址：https://gitee.com/vhacker/JianYiWangPanXiTong

 

点赞(0)
PHP的输出缓冲区（转）
PHP的输出缓冲区（转）
Docker最全教程之使用PHP搭建个人博客站点（二十二）
Docker最全教程之使用PHP搭建个人博客站点（二十二）
php_mysql、php_mysqli 与 pdo_mysql 的区别与选择
php_mysql、php_mysqli 与 pdo_mysql 的区别与选择
php isset()与empty()的使用
php isset()与empty()的使用

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论 返回
顶部