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开发精彩游戏所需的[]为重要的该你那.本书不 ...
随机推荐
- Treblecross 博弈SG值
Treblecross is a two player game where the goal is to get three X in a row on a one-dimensional boar ...
- Deep learning：一(基础知识_1)
本文纯转载: 主要是想系统的跟tornadomeet的顺序走一遍deeplearning; 前言: 最近打算稍微系统的学习下deep learing的一些理论知识,打算采用Andrew Ng的网页教程 ...
- VB6文件操作自定义函数合集之一
'--与文件及文件夹操作相关的函数 '--必须引用FSO的ACTIVE OBJECT Dim strList As String '--列表串,返回文件列表 '================ '-- ...
- java内部类demo
内部类主要有三种:静态内部类,实例内部类,局部变量内部类 1.静态内部类,该类被static修饰,并且是成员变量,它只能访问外部类被static修饰的方法以及字段(这种说法只局限于不再内部类中创建外部 ...
- 创建UWP通用应用程序
一,下载VS2015,下载地址:https://www.visualstudio.com/zh-hans/downloads/ VS2015下载地址 二,选择UWP开发工具并安装 VS2015配置 三 ...
- IT 圈里有哪些经常被读错的词？
原文链接:IT 圈里有哪些经常被读错的词? ()标相应英文单词[]标音标 =====公司/产品名===== Youtube (You-tube [tju:b]) 念 优tiu啵 不念 优吐毙Skype ...
- Redis 学习笔记-5种数据类型的基本操作
1.string类型 基本操作列表: GET 获取指定键对应的值 SET 设定键值 DEL 删除指定键对应的值(对所有数据类型都有效) > set hello world OK > get ...
- [mysql使用(1)] 64位Linux下安装mysql-5.7.13-linux-glibc2.5-x86_64
由于公司临时让将Oracle的数据移植到mysql上面,所以让我在公司服务器上面安装一下mysql.下面就是我的安装过程以及一些错误解决思路.其实对于不同版本安装大体都有差不多. 1. 从官网下载 m ...
- 双向链表--Java实现
/*双向链表特点: *1.每个节点含有两个引用,previos和next,支持向前或向后的遍历(除头节点) *2.缺点插入或删除的时候涉及到引用修改的比较多 *注意:下面的双向链表其实也实现了双端链表 ...
- Memcached存储命令
Memcached各个存储命令的语法格式都类似,且有相同的参数和参数含义,先将可能出现的各个参数的意义说明如下: key: 键值 key-value 结构中的 key,用于查找缓存值. flag ...