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开发精彩游戏所需的[]为重要的该你那.本书不 ...
随机推荐
- poj1067威佐夫博奕
取石子游戏 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 31490 Accepted: 10374 Descripti ...
- MyBatis 关系映射XML配置
关系映射 在我看来这些实体类就没啥太大关联关系,不就是一个sql语句解决的问题,直接多表查询就完事,程序将它设置关联就好 xml里面配置也是配置了sql语句,下面给出几个关系的小毛驴(xml) 一对多 ...
- webpack2使用ch3-自动化生成.html和内部引入的js自动更改
1 安装webpack插件 $ cnpm install html-webpack-plugin --save-dev 安装成功后 2 由于之前 dist/目录下,编译后的.html和.js会混在一起 ...
- 平稳切换nginx版本
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- PPLB条码打印
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- SQL server 数据库备份大
首先简单的介绍一下Sql server 备份的类型有: 1:完整备份(所有的数据文件和部分的事务日志文件) 2:差异备份(最后一次完成备份后数据库改变的部分) 3:文件和文件组备份(对指定的文件和文件 ...
- C语言 实现base64
#include <stdio.h> const char base[] = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvw ...
- Spring高级装配
Spring高级装配 目录 一.Profile(根据开发环境创建对应的bean) 二.条件化的创建bean(根据条件创建bean) 三.处理自动装配歧义性(指定首选bean.限定符限制bean) 四. ...
- Struts2 06--系统拦截器防止数据重复提交
一.拦截器简要概述 拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作.拦截是AOP的一种实现策略. 在W ...