网盘系统

 

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

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

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

1
登录注册页
 
登录注册页不是今天的重点，直接贴上我之前做过的页面代码，之前使用bootstrap做的懒得再做新的了直接拿过来用~~
登录：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>用户登录</title>
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  7.         <style type="text/css">
  8.             body{
  9.                 margin: 0px;
  10.                 padding: 0px;
  11.                 background-color: #CCCCCC;
  12.             }
  13.             .panel{
  14.                 width: 380px;
  15.                 height: 280px;
  16.                 position: absolute;
  17.                 left: 50%;
  18.                 margin-left: -190px;
  19.                 top: 50%;
  20.                 margin-top: -140px;
  21.             }
  22.             .form-horizontal{
  23.                 padding: 10px 20px;
  24.             }
  25.             .btns{
  26.                 display: flex;
  27.                 justify-content: center;
  28.             }
  29.         </style>
  30.     </head>
  31.  
  32.     <body>
  33.         <div class="panel panel-primary">
  34.             <div class="panel-heading">
  35.                 <div class="panel-title">用户登录</div>
  36.             </div>
  37.             <div class="panel-body">
  38.                 <form class="form-horizontal">
  39.                     <div class="form-group">
  40.                         <label>用户名</label>
  41.                         <input type="text" class="form-control" name="userName"/>
  42.                     </div>
  43.                     <div class="form-group">
  44.                         <label>密码</label>
  45.                         <input type="password" class="form-control" name="pwd"/>
  46.                     </div>
  47.  
  48.                     <div class="form-group btns">
  49.                         <input type="button" class="btn btn-primary" value="登录系统" id="submit"/>
  50.                         &nbsp;&nbsp;&nbsp;&nbsp;
  51.                         <a type="button" class="btn btn-success" href="reg.php"/>注册账号</a>
  52.                     </div>
  53.  
  54.                 </form>
  55.             </div>
  56.         </div>
  57.     </body>
  58.  
  59.     <script src="js/jquery-3.1.1.js"></script>
  60.     <script type="text/javascript">
  61.         $(function(){
  62.             $("#submit").click(function(){
  63.                 var str = $("form").serialize();
  64.                 $.post("admin/doLogin.php",{"user":str},function(data){
  65.                     if (data=="true") {
  66.                         alert("登录成功");
  67.                         location = "index.html?loginUser="+$("input[name='userName']").val();
  68.                     }else{
  69.                         alert("登录失败");
  70.                     }
  71.                 });
  72.             });
  73.         });
  74.     </script>
  75. </html>
  1. <?php
  2. header ( "Content-Type:text/html;charset = utf-8");
  3.     // username=lisi&pwd=123
  4.     //处理登录信息
  5.     list($username,$pwd) = explode("&", $_POST["user"]);
  6.     list(,$username) = explode("=", $username);
  7.     list(,$pwd) = explode("=", $pwd);
  8.     $str = file_get_contents("user.txt");
  9.  
  10.     //将每个人的信息分开，并存入数组
  11.     $user = explode("<=>", $str);
  12.  
  13.     // 验证登录信息
  14.     foreach ($user as $user) {
  15.         // 遍历数组，将每个人的信息，进行分割，并进行对比
  16.         list($realName,$realPwd) = explode("&",$user);
  17.         list(,$realName) = explode("=", $realName);
  18.         list(,$realPwd) = explode("=", $realPwd);
  19.         //验证
  20.         if($username == $realName && $pwd == $realPwd)
  21.             die("true");
  22.     }
  23.     die("false");

注册：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>用户注册</title>
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  7.         <style type="text/css">
  8.             body{
  9.                 margin: 0px;
  10.                 padding: 0px;
  11.                 background-color: #CCCCCC;
  12.             }
  13.             .panel{
  14.                 width: 380px;
  15.                 height: 350px;
  16.                 position: absolute;
  17.                 left: 50%;
  18.                 margin-left: -190px;
  19.                 top: 50%;
  20.                 margin-top: -175px;
  21.             }
  22.             .form-horizontal{
  23.                 padding: 10px 20px;
  24.             }
  25.             .btns{
  26.                 display: flex;
  27.                 justify-content: center;
  28.             }
  29.         </style>
  30.     </head>
  31.  
  32.     <body>
  33.         <div class="panel panel-primary">
  34.             <div class="panel-heading">
  35.                 <div class="panel-title">用户注册</div>
  36.             </div>
  37.             <div class="panel-body">
  38.                 <form class="form-horizontal">
  39.                     <div class="form-group">
  40.                         <label>用户名</label>
  41.                         <input type="text" class="form-control" name="userName"/>
  42.                     </div>
  43.                     <div class="form-group">
  44.                         <label>密码</label>
  45.                         <input type="password" class="form-control" name="pwd" />
  46.                     </div>
  47.                     <div class="form-group">
  48.                         <label>确认密码</label>
  49.                         <input type="password" class="form-control" name="rePwd" />
  50.                     </div>
  51.  
  52.                     <div class="form-group btns">
  53.                         <input type="button" class="btn btn-primary" value="确定注册" id="submit"/>
  54.                         &nbsp;&nbsp;&nbsp;&nbsp;
  55.                         <a type="button" class="btn btn-success" href="login.php"/>返回登录</a>
  56.                     </div>
  57.  
  58.                 </form>
  59.             </div>
  60.         </div>
  61.     </body>
  62.  
  63.     <script src="js/jquery-3.1.1.js"></script>
  64.     <script type="text/javascript">
  65.         $(function(){
  66.             $("#submit").on("click",function(){
  67.                 var str = $("form").serialize();
  68.                 console.log(str);
  69.                 $.post("admin/doReg.php",{"user":str},function(data){
  70.                     if(data=="true"){
  71.                         alert("注册成功！即将跳转登陆页！");
  72.                         location = "login.php";
  73.                     }else{
  74.                         alert("注册失败！因为啥我不知道！");
  75.                     }
  76.                 });
  77.             });
  78.         });
  79.     </script>
  80. </html>
  1. <?php
  2.     header ( "Content-Type:text/html;charset = utf-8");
  3.  
  4.     $user = $_POST["user"]."<=>";
  5.  
  6.     $num = file_put_contents("user.txt", $user,FILE_APPEND);
  7.  
  8.     if($num>0) echo "true";
  9.     else echo "false";
 
2
网盘主界面布局
 
比较匆忙~网盘界面比较简陋~~~用的Layui做的。layUI在做后台项目上感觉要比bootstrap要好一些的~
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.   <title>XX网盘</title>
  7.   <link rel="stylesheet" href="css/layui.css">
  8.   <style type="text/css">
  9.             iframe{
  10.                 display: block;
  11.                 width: 100%;
  12.                 height: 500px;
  13.                 border: hidden;
  14.                 margin: 0px auto;
  15.                 position: absolute;
  16.             }
  17.         </style>
  18. </head>
  19. <body class="layui-layout-body">
  20. <div class="layui-layout layui-layout-admin">
  21.   <div class="layui-header">
  22.     <div class="layui-logo">XX云盘</div>
  23.     <ul class="layui-nav layui-layout-right">
  24.       <li class="layui-nav-item">
  25.         <a href="javascript:;" class="text1">
  26.           <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
  27.  
  28.         </a>
  29.       </li>
  30.       <li class="layui-nav-item"><a href="login.php">退出</a></li>
  31.     </ul>
  32.   </div>
  33.  
  34.   <div class="layui-side layui-bg-black">
  35.     <div class="layui-side-scroll">
  36.       <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
  37.       <ul class="layui-nav layui-nav-tree"  lay-filter="test">
  38.         <li class="layui-nav-item layui-nav-itemed">
  39.           <a class="" href="javascript:;">文件上传</a>
  40.           <dl class="layui-nav-child">
  41.             <dd><a href="">上传文件</a></dd>
  42.             <dd><a onclick="func('http://www.baidu.com')">上传图片</a></dd>
  43.           </dl>
  44.         </li>
  45.       </ul>
  46.     </div>
  47.   </div>
  48.  
  49.   <div class="layui-body" style="background-color: #F7F8F9;">
  50.     <!-- 内容主体区域 -->
  51.     <div style="padding: 15px;background-color: #F7F8F9;">
  52.             <iframe  scrolling="no" src="html/uploadFile.html" scrd id="iframe"></iframe>
  53.     </div>
  54.   </div>
  55.  
  56.   <div class="layui-footer">
  57.     <!-- 底部固定区域 -->
  58.     © layui.com - 底部固定区域
  59.   </div>
  60. </div>
  61. <script src="js/layui.js"></script>
  62. <script src="js/jquery-3.1.1.js"></script>
  63. <script>
  64. //JavaScript代码区域
  65. layui.use('element', function(){
  66.   var element = layui.element;
  67.  
  68. });
  69. </script>
  70. <script type="text/javascript">
  71.         function func(url){
  72.             document.getElementById("iframe").src = url;
  73.         }
  74. </script>
  75. </body>
  76. </html>
 
2
上传
 
重点功能来了~~
文件上传是靠PHP来实现的。我在的时候特别注意了可以多文件上传：可以Ctrl多个文件选择
 

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

  1. <?php
  2.  
  3.     header("Content-Type:text/html;charset=utf-8");
  4.     $count = count($_FILES["file"]["name"]);
  5.     for($i=0; $i<$count; $i++){
  6.         // 取到文件名，并用.分割为数组
  7.         $arr = explode(".", $_FILES['file']['name'][$i]);
  8.         // 取到数组最后一个即为后缀名
  9.         $type = $arr[count($arr)-1];
  10.         // 使用原文件名+当前时间+随机数，生成新文件名
  11.         $fileName = $arr[0].date("YmdHis").rand(100, 999).".".$type;
  12.         $fileName = iconv("UTF-8", "GBK", $fileName);
  13.         // 检测文件是否为合法上传文件
  14.         if(!is_uploaded_file($_FILES['file']['tmp_name'][$i])){
  15.             echo("文件【{$_FILES['file']['name'][$i]}】不是合法上传文件！<br>");
  16.             continue;
  17.         }
  18.         // 将临时文件，移动到指定文件夹下
  19.         $isOk = move_uploaded_file($_FILES['file']['tmp_name'][$i], "../upload/{$fileName}");
  20.         if(!$isOk){
  21.             echo("文件【{$_FILES['file']['name'][$i]}】上传失败！<br>");
  22.             continue;
  23.         }
  24.         //echo "文件【{$_FILES['file']['name'][$i]}】上传成功！<br>";
  25.         echo "<script type='text/javascript'>alert('文件【{$_FILES['file']['name'][$i]}】上传成功！');</script>";
  26.         echo "<script type='text/javascript'> window.location.assign('../html/uploadFile.html')</script>";
  27.     }

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="../css/layui.css"/>
  7.         <style type="text/css">
  8.             iframe{
  9.                 display: block;
  10.                 width: 80%;
  11.                 height: 300px;
  12.                 border: hidden;
  13.                 margin: 0px auto;
  14.                 position: absolute;
  15.             }
  16.             body{
  17.                 background-color: #F7F8F9;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <div>
  23.             <h1>请选择上传到服务器的文件</h1>
  24.             <form action="../admin/doUpload.php" method="post" enctype="multipart/form-data">
  25.                 <input type="file" name="file[]" multiple="multiple" />
  26.                 <input type="submit" value="点击上传"     class="layui-btn layui-btn-normal"/>
  27.             </form>
  28.         </div>
  29.         <iframe  scrolling="no" src="../admin/file.php" scrd id="iframe1"></iframe>
  30.     </body>
  31. </html>
 
3
显示文件列表
 
文件上传后，在网盘主界面显示上传文件的列表，以下是代码：
  1. <?php
  2.  
  3.     header("Content-Type:text/html;charset=utf-8");
  4.     /*读取一个文件目录，并将目录中的文件夹和文件分类罗列；*/
  5.     $dir = "../upload";
  6.     $dir = iconv("UTF-8", "GBK", $dir);
  7.     $res = opendir($dir);
  8.     $files = [];
  9.     $dirs = [];
  10.     while($f = readdir($res)){
  11.         if($f=="." || $f=="..") continue;
  12.         $f = iconv("GBK", "UTF-8", $f);
  13.         $f1 = iconv("UTF-8", "GBK", $dir."/".$f);
  14.         if(is_file($f1)){
  15.             $files[] = $f;
  16.         }elseif(is_dir($f1)){
  17.             $dirs[] = $f;
  18.         }
  19.     }
  20.  
  21.     echo "<h2>所有文件：</h2>";
  22.     echo "<hr />";
  23.     foreach ($files as $key => $value) {
  24.         echo '<a href="process.php?filename=' . $value . '">' . $value . '</a>';
  25.         echo '<br />';
  26.     }
 
5
大体功能展示以及下个版本要完善的功能假想~~
 
主界面：

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

 

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

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

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

 

Layui框架+PHP打造个人简易版网盘系统的更多相关文章

  1. 私人网盘系统2.0—全部升级为layUI+PHP(持续更新中)shang

    网盘系统2.0   上周,我做了第一版的“私人网盘系统”,http://www.cnblogs.com/sunlizheng/p/7822036.html 没看过的朋友可以去看一下,这周在家升级做了第 ...

  2. .NET Core的文件系统[5]：扩展文件系统构建一个简易版“云盘”

    FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...

  3. django框架简介及自定义简易版框架

    web应用与web框架本质 概念 什么是web应用程序呢? Web应用程序就一种可以通过互联网来访问资源的应用程序, 用户可以只需要用一个浏览器而不需要安装其他程序就可以访问自己需要的资源. 应用软件 ...

  4. JAVA Socket通信 打造属于自己的网盘

    近一个月没敲JAVA代码了,最近老师布置了一个写JAVA网盘的作业,总共花了十几个小时,总算写完了,debug真的累,感觉自己还是菜了,没有那种有一个想法就能马上用代码实现的能力....不扯了,下面开 ...

  5. The Road To Hadoop（网盘系统的实现）

    因为毕业设计的原因,得从零开始学习hadoop.虽然接触Hadoop也有一段时间了,但是没有一个完整的时间段去学习,在公司实习的同时,只能利用零零碎碎的时间学习,今天完成了第一个版本的基于Hadoop ...

  6. Python网络编程基础 PDF 完整超清版|网盘链接内附提取码下载|

    点此获取下载地址提取码:y9u5 Python网络编程最好新手入门书籍!175个详细案例,事实胜于雄辩,Sockets.DNS.Web Service.FTP.Email.SMTP.POP.IMAP. ...

  7. Python学习手册第4版 中文PDF版|网盘下载内附地址

    本书是学习Python编程语言的入门书籍.Python是一种很流行的开源编程语言,可以在各种领域中用于编写独立的程序和脚本.Python免费.可移植.功能强大,而且使用起来相当容易.来自软件产业各个角 ...

  8. 笨办法学python 第四版 中文pdf高清版|网盘下载内附提取码

    笨办法学 Python是Zed Shaw 编写的一本Python入门书籍.适合对计算机了解不多,没有学过编程,但对编程感兴趣的朋友学习使用.这本书以习题的方式引导读者一步一步学习编 程,从简单的打印一 ...

  9. Python游戏编程入门 中文pdf扫描版|网盘下载内附地址提取码|

    Python是一种解释型.面向对象.动态数据类型的程序设计语言,在游戏开发领域,Python也得到越来越广泛的应用,并由此受到重视. 本书教授用Python开发精彩游戏所需的[]为重要的该你那.本书不 ...

随机推荐

  1. 快速双边滤波 附完整C代码

    很早之前写过<双边滤波算法的简易实现bilateralFilter>. 当时学习参考的代码来自cuda的样例. 相关代码可以参阅: https://github.com/johng12/c ...

  2. XSS跨站脚步攻击及防范

    XSS(Cross Site Script)跨站脚本攻击.它指的是恶意攻击者往Web 页面里插入恶 意html 代码,当用户浏览该页之时,嵌入其中Web 里面的html 代码会被执行,从而达到侵害用户 ...

  3. 学习如何看懂SQL Server执行计划（二）——函数计算篇

    二.函数计算部分 --------------------标量聚合--------------------/* 标量聚合-主要在聚合函数操作中产生 计算标量:根据行中的现有值计算出一个新值 流聚合:在 ...

  4. 一步一个坑 - WinDbg调试.NET程序

    引言 第一次用WinDbg来排查问题,花了很多时间踩坑,记录一下希望对后面的同学有些帮助. 客户现场软件出现偶发性的界面卡死现象一直找不出原因,就想着让客户用任务管理器生成了一个dump文件发给我,我 ...

  5. springboot scheduled并发配置

    本文介绍如何使用springboot的sheduled实现任务的定时调度,并将调度的任务实现为并发的方式. 1.定时调度配置scheduled 1)注册定时任务 package com.xiaoju. ...

  6. Linux基础命令讲解（二）

    Linux命令基本格式: 命令 [参数] [路径文件] 方括号内容可省略 查看命令帮助手段: 1 man 命令名 (man 还可以获取配置文件,函数的帮助) 2 命令 --help 3 help 命令 ...

  7. Java IO编程全解（一）——Java的I/O演进之路

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7419117.html JDK1.4之前的早期版本,Java对I/O的支持并不完善,开发人员在开发高性能I/O ...

  8. java四大会话技术

    未经作者允许,不得转载 第一cookie技术 常用方法: new Cookie(),构造一个cookie getName() ,获取cookie的名字 getValue () ,取到具体cookie的 ...

  9. Express+Mongoose(MongoDB)+Vue2全栈微信商城项目全记录

    最近用vue2做了一个微信商城项目,因为做的比较仓促,所以一边写一下整个流程,一边稍做优化. 项目github地址:https://github.com/seven9115/vue-fullstack ...

  10. time函数获取时间与本地时间不一致

    修改php.ini,将“date.timezone”项修改为“date.timezone = PRC”. 大陆内地可用的值是:Asia/Chongqing ,Asia/Shanghai ,Asia/U ...