Layui框架+PHP打造个人简易版网盘系统
网盘系统
大家应该都会注册过致命的一些网盘~如百度云。百科介绍：网盘，又称网络U盘、网络硬盘，是由互联网公司推出的在线存储服务，服务器机房为用户划分一定的磁盘空间，为用户免费或收费提供文件的存储、访问、备份、共享等文件管理等功能，并且拥有高级的世界各地的容灾备份。
我也一直在用网盘。。但是有一个特别让人无语的是你不开他家的会员，就给你限速。那下载速度简直跟乌龟似得~~
周末在家无聊突发奇想~自己用Layui这款前端框架配合PHP做了一个简易版的网盘。后续也有想法继续去更新完善它，大家有什么想法和建议可以在下方留言！
1登录注册页
<!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"/>
<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"/>
<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网盘主界面布局
<!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上传
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大体功能展示以及下个版本要完善的功能假想~~
下载文件直接点击文件名就可以下载
后面我想添加一个上传图片，类似图床的功能~以及上传视频在线观看~
大家如果有什么好的建议欢迎在下边留言~
Layui框架+PHP打造个人简易版网盘系统的更多相关文章
- 私人网盘系统2.0—全部升级为layUI+PHP(持续更新中)shang
网盘系统2.0 上周,我做了第一版的“私人网盘系统”,http://www.cnblogs.com/sunlizheng/p/7822036.html 没看过的朋友可以去看一下,这周在家升级做了第 ...
- .NET Core的文件系统[5]：扩展文件系统构建一个简易版“云盘”
FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...
- django框架简介及自定义简易版框架
web应用与web框架本质 概念 什么是web应用程序呢? Web应用程序就一种可以通过互联网来访问资源的应用程序, 用户可以只需要用一个浏览器而不需要安装其他程序就可以访问自己需要的资源. 应用软件 ...
- JAVA Socket通信 打造属于自己的网盘
近一个月没敲JAVA代码了,最近老师布置了一个写JAVA网盘的作业,总共花了十几个小时,总算写完了,debug真的累,感觉自己还是菜了,没有那种有一个想法就能马上用代码实现的能力....不扯了,下面开 ...
- The Road To Hadoop（网盘系统的实现）
因为毕业设计的原因,得从零开始学习hadoop.虽然接触Hadoop也有一段时间了,但是没有一个完整的时间段去学习,在公司实习的同时,只能利用零零碎碎的时间学习,今天完成了第一个版本的基于Hadoop ...
- Python网络编程基础 PDF 完整超清版|网盘链接内附提取码下载|
点此获取下载地址提取码:y9u5 Python网络编程最好新手入门书籍!175个详细案例,事实胜于雄辩,Sockets.DNS.Web Service.FTP.Email.SMTP.POP.IMAP. ...
- Python学习手册第4版 中文PDF版|网盘下载内附地址
本书是学习Python编程语言的入门书籍.Python是一种很流行的开源编程语言,可以在各种领域中用于编写独立的程序和脚本.Python免费.可移植.功能强大,而且使用起来相当容易.来自软件产业各个角 ...
- 笨办法学python 第四版 中文pdf高清版|网盘下载内附提取码
笨办法学 Python是Zed Shaw 编写的一本Python入门书籍.适合对计算机了解不多,没有学过编程,但对编程感兴趣的朋友学习使用.这本书以习题的方式引导读者一步一步学习编 程,从简单的打印一 ...
- Python游戏编程入门 中文pdf扫描版|网盘下载内附地址提取码|
Python是一种解释型.面向对象.动态数据类型的程序设计语言,在游戏开发领域,Python也得到越来越广泛的应用,并由此受到重视. 本书教授用Python开发精彩游戏所需的[]为重要的该你那.本书不 ...
随机推荐
- SpringMVC上传压缩文件，解压文件，并检测上传文件中是否有index.html
SpringMVC上传压缩文件,解压文件,并检测上传文件中是否有index.html 说明: 1.环境:SpringMVC+Spring+Tomcat7+JDK1.7 2.支持 zip和rar格式的压 ...
- C#进阶之AOP
一.AOP概念(转自) AOP(Aspect-Oriented Programming,面向切面的编程),它是可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技 ...
- 原创:工作指派问题解决方案---模拟退火算法C实现
本文忽略了对于模拟退火的算法的理论讲解,读者可参考相关的博文或者其他相关资料,本文着重于算法的实现: /************************************************ ...
- Linux用户和文件权限管理
本文为原创文章,转载请标明出处 目录 用户管理 系统用户文件 添加用户 useradd 设置用户密码 passwd 删除用户 userdel 用户管理 usermod 用户组管理 系统用户组文件 添加 ...
- OC中成员属性 成员变量
比如用property声明一个变量属性 然后我们会为它用懒加载的方式重写get方法 然后我们在使用这个变量的时候,都是用self.itemArray,为什么这样用比较好呢,这是因为self.是对属性的 ...
- Python自学笔记-面向对象编程（Mr seven）
类的成员可以分为三大类:字段.方法和属性. 一.字段 字段包括:普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同, 普通字段属于对象 静态字段属于类 二.方法 方法 ...
- HDU3844Tour （好题）
题意: 有N个点,M个单向边,现在要你设计N条路线覆盖所有的点,每个点都属于且值属于一个环.(为什么是N条边:和最小生成树为什么有N-1条边是一样的证明). 解析: 每个点都有一个喜欢对象(出度 ...
- C#用SerialPort实现串口通讯
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 使用测试思路快速学习Python－适合测试工程师的学习方法
本文采用Python doctest单元测试的方法,直接用代码学习代码,滚雪球式的迭代学习. doctest是一个python标准库自带的轻量单元测试工具,适合实现一些简单的单元测试.它可以在docs ...
- 为db2用户添加db2命令及jdk环境变量配置
AIX系统:db2inst用户 在/home/db2inst/.profile文件下新增以下代码(包括用户环境变量配置,具体路径取决于jdk安装的路径) PATH=/usr/bin:/etc:/usr ...