网盘系统
大家应该都会注册过致命的一些网盘~如百度云。百科介绍：网盘，又称网络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"/>
<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网盘主界面布局
比较匆忙~网盘界面比较简陋~~~用的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大体功能展示以及下个版本要完善的功能假想~~
主界面：
下载文件直接点击文件名就可以下载
后面我想添加一个上传图片，类似图床的功能~以及上传视频在线观看~
大家如果有什么好的建议欢迎在下边留言~