PHP网站设计 ---- 网盘(实现用户注册、登录，文件上传、下载、删除、查看等功能)

运行效果

视频演示

项目下载(在xampp/htdocs/下可以直接运行)

完整项目包.zip

功能要求

当用户注册后分配相应的云盘空间，使用已注册后的用户名登录后，可以使用文件上传，下载，删除，查看等功能。

应用场景

在实验室，您有没有忘带U盘，电脑上还没有QQ等社交软件时文件无法带走的烦恼。

项目原理

登录页面：
通过输入的用户名和密码，在mysql数据库用户表中查询，查询到用户名如果为空，表示用户表没有此用户，即此用户为注册，如果查询到此用户名，再根据此用户名查询其密码，如果输入密码与数据库内查询到密码一致，登录成功跳转到主页。

注册页面：
注册页面包含三个输入框：用户名，密码，邀请码；输入都非空后，首先判断邀请码是否正确，如错误则刷新本页面并输出邀请码错误，如正确判断数据库内此用户有没有注册，如有注册刷新本页面并输出用户已注册，数据库内没有注册过则插入数据库。

主页：
主页使用传统三段式结构：头、身体、尾，头包含用户登录信息，注销按钮等，身体包括说明文档，主要功能区等，尾包含版权信息等

项目结构

在XAMPP安装目录下htdocs下建立项目文件夹Cloud，在Cloud下建文件夹html和upload，前者为代码放置文件夹，后者为上传文件放置文件夹
Cloud

1.Cloud

2.html

3.css

4.imgs

5.js

6.js/localization

7.upload下为空

文件夹 html 下代码

1.login.php
效果：

代码：

<?php//启动session的初始化session_start();$_SESSION["username_html"]="";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轻量云</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body style="background: url(imgs/3.jpg);background-size:cover;">
<div class="wrapper"><div class="container"><h1>轻量云网盘</h1><form class="form" id="loginform" action="" method="post"><div><input type="text" name="username" placeholder="用户名" ></div><div><input type="password" id="password" name="password" placeholder="密码" ></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<a href="add_user.php">没有账号？点我</a></div><button type="submit">登录</button></form></div>
</div><script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/localization/messages_zh.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript">$().ready(function() {$('button').click(function(){var a = $('#password').val();var b = hex_md5(a);$('#password').val(b);});// 在键盘按下并释放及提交后验证提交表单$("#loginform").validate({rules : {username : {required : true,rangelength:[2,8]},password : {required : true,rangelength:[6,32]},},messages : {username : {required : "请输入用户名",rangelength:"用户名长度必须在2-8个字符之间"},password : {required : "请输入密码",rangelength:"密码长度必须在6-32个字符之间"},}});})var error="${error}";
if(error=="error"){alert("帐户名或密码错误");
}
</script>
</body>
</html>
<?php// 定义变量并设置为空值
$username_html = $password_html = "";if ($_SERVER["REQUEST_METHOD"] == "POST") {$username_html = test_input($_POST["username"]);$password_html = test_input($_POST["password"]);       //此处密码已md5加密$login_flag = password_verification($username_html,$password_html);if ($login_flag == 1) {  //为1则密码正确$_SESSION["username_html"]="$username_html";header("refresh:0;url = http://localhost/Cloud/html/index.php");echo "登录成功，跳转到主页...";}elseif ($login_flag == 0) {//为0密码错误header("refresh:2;url = http://localhost/Cloud/html/login.php");echo "密码错误，2秒后跳转到登录页面..";}elseif ($login_flag == -1) { //为-1用户名不存在header("refresh:2;url = http://localhost/Cloud/html/login.php");echo "用户名不存在，2秒后跳转到登录页面...";}else{}//查询数据库user表，是否有这个用户及密码是否正确，如果匹配到，跳转到操作界面}function password_verification($usernamehtml,$passwordhtml){$dbms = 'mysql';$user = 'root';$pwd = 'root';$dbName = 'cloud';$host = 'localhost';$charset = 'utf8';$dsn = "$dbms:host=$host;dbname=$dbName;charset=$charset";try {$pdo = new PDO( $dsn, $user, $pwd );} catch ( Exception $e ) {echo $e->getMessage();}$pdo->exec('set names utf8');/  用户名存在检测$sql = "select * from user";//准备sql模板$stmt = $pdo->prepare( $sql );//绑定参数//$id = '1';$stmt->bindValue( 1, $id );//执行预处理语句$stmt->execute();$row_flag = 0;while ( $row = $stmt->fetch() ) {$ssss =  $row[ 'name' ];if (!strcmp($usernamehtml,$ssss)) {$row_flag = 1;} }if ($row_flag == 0) {//释放查询结果$stmt = null;//关闭连接$pdo = null;return -1;}///   密码检测//查询$sql = "select * from user where name = '$usernamehtml'";//准备sql模板$stmt = $pdo->prepare( $sql );$id = '1';//绑定参数$stmt->bindValue( 1, $id );//执行预处理语句$stmt->execute();//推荐这种方式来获取查询结果while ( $row = $stmt->fetch() ) {//echo $row[ 'name' ];$ssss = $row[ 'password' ];//echo "<br />";//echo "passwordhtml:$passwordhtml";//echo "<br />";//echo "ssss:$ssss"; if (!strcmp($passwordhtml,$ssss)){//释放查询结果$stmt = null;//关闭连接$pdo = null;return 1;}else{//释放查询结果$stmt = null;//关闭连接$pdo = null;return 0;}}
}function test_input($data) {$data = trim($data);$data = stripslashes($data);$data = htmlspecialchars($data);return $data;
}
?>

2.add_user.php(注册页面)
效果：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body style="background: url(imgs/4.jpg);background-size:cover;">
<div class="wrapper"><div class="container"><h1>注册页面</h1><form class="form" id="loginform" action="" method="post"><div><input type="text" name="username" placeholder="用户名" ></div><div><input type="password" id="password" name="password" placeholder="密码" ></div><div><input type="text" id="invitation" name="invitation" placeholder="邀请码" ></div><div></div><br /><button type="submit">注册</button></form></div>
</div><script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/localization/messages_zh.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript">$().ready(function() {$('button').click(function(){var a = $('#password').val();var b = hex_md5(a);$('#password').val(b);});// 在键盘按下并释放及提交后验证提交表单$("#loginform").validate({rules : {username : {required : true,rangelength:[2,8]},password : {required : true,rangelength:[2,32]},},messages : {username : {required : "请输入用户名",rangelength:"用户名长度必须在2-8个字符之间"},password : {required : "请输入密码",rangelength:"密码长度必须在6-32个字符之间"},}});})var error="${error}";
if(error=="error"){alert("帐户名或密码错误");
}
</script>
</body>
</html>
<?phpif ($_SERVER["REQUEST_METHOD"] == "POST") {// 定义变量并设置为空值$username_html = $password_html = "";$username_html = test_input($_POST["username"]);$password_html = test_input($_POST["password"]);//此处密码已md5加密$invitation_html = test_input($_POST['invitation']);/*echo $username_html;echo "<br />";echo $password_html;echo "<br />";echo $invitation_html;*/echo "<br />";$add_user_flag = add_user($username_html,$password_html,$invitation_html);if($add_user_flag == 1){create_dir($username_html); //分配相应云盘空间header("refresh:2;url = http://localhost/Cloud/html/login.php");echo "用户注册成功，2秒后跳转到登录页面...";}elseif ($add_user_flag == 0) {header("refresh:2;url = http://localhost/Cloud/html/add_user.php");echo "用户名已存在，2秒后跳转到注册页面...";}elseif ($add_user_flag == -1) {header("refresh:2;url = http://localhost/Cloud/html/add_user.php");echo "邀请码错误，2秒后跳转到注册页面...";}//查询数据库user表，是否有这个用户及密码是否正确，如果匹配到，跳转到操作界面
}function add_user($usernamehtml,$passwordhtml,$invitationhtml){php操作pdo实现插入//echo "运行add_user函数";if ($invitationhtml != '17B') {echo "邀请码错误";return -1;}else {if(select_user($usernamehtml) == 1){$dbms = 'mysql';$user = 'root';$pwd = 'root';$dbName = 'cloud';$host = 'localhost';$charset = 'utf8';$dsn = "$dbms:host=$host;dbname=$dbName;charset=$charset";try {$pdo = new PDO( $dsn, $user, $pwd );} catch ( Exception $e ) {echo $e->getMessage();}$pdo->exec('set names utf8');$sql="insert into user(name,password) values('$usernamehtml','$passwordhtml')";if($pdo->query($sql)){echo '数据添加成功!';return 1;}}else{echo "用户名已存在<br />";return 0;}}}function select_user($usernamehtml){$dbms = 'mysql';$user = 'root';$pwd = 'root';$dbName = 'cloud';$host = 'localhost';$charset = 'utf8';$dsn = "$dbms:host=$host;dbname=$dbName;charset=$charset";$i = 0;try {$pdo = new PDO( $dsn, $user, $pwd );} catch ( Exception $e ) {echo $e->getMessage();}$pdo->exec('set names utf8');//查询$sql = "select * from user where name = '$usernamehtml'";//准备sql模板$stmt = $pdo->prepare( $sql );$id = '1';//绑定参数$stmt->bindValue( 1, $id );//执行预处理语句$stmt->execute();//推荐这种方式来获取查询结果echo "<br />";while ( $row = $stmt->fetch() ) {//echo $row[ 'id' ];//echo $row[ 'name' ];$i = $i +1;}//echo "<br />";//echo "i:$i";if($i == 0){//释放查询结果$stmt = null;//关闭连接$pdo = null;return 1;    //用户名可以使用}else {//释放查询结果$stmt = null;//关闭连接$pdo = null;return -1;}}function create_dir($usernamehtml){$dir = iconv("UTF-8", "GBK", "../upload/$usernamehtml");if (!file_exists($dir)){mkdir ($dir,0777,true);echo '创建文件夹成功';} else {echo '需创建的文件夹已经存在';}
}function test_input($data) {$data = trim($data);$data = stripslashes($data);$data = htmlspecialchars($data);return $data;
}?>

3.index.php(主页界面)
效果：

代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><title>轻量云主页</title><link rel="stylesheet" href="css/hangge.css">
</head>
<body>
<div id="wrapper"><header class="SiteHeader"><div class="inner"><a href="index.html" class="logo">轻量云网盘</a><nav id="nav"><?phpsession_start();$username_html = $_SESSION["username_html"];//读取登录的用户if ($username_html == "") {echo "<a href=\"login.php\">未登录</a>";}else{echo "<a>$username_html 已登录</a>";}?><a href="cancellation.php">注销</a></nav></div></header><aside class="NavSidebar"><nav><h2>使用说明</h2><ul><li>账户注册后，默认分配云空间。</li><li>注意数据安全，隐私数据请勿上传。</li><li>上传文件时点击浏览选择本地文件进行上传。</li><li>下载文件时点击云盘内文件后点击下载。</li><li>删除文件时点击云盘内文件后点击删除。</li><li style="color: red;"><a href="wechat.html">轻量云网盘感谢各位的支持，开发者联系方式。</a></li></ul></nav><section><h2>关于我们</h2><p>轻量云网盘由Pengjiaqi开发，提供一定性能的云存储功能。</p></section><div><img src="imgs/2.jpg" width='150px' style="border-radius: 20px;"></div></aside><main class="main"><article class="Content"><header class="ArticleHeader"><h2>欢迎来到轻量云网盘</h2><p class="Byline">by Pengjiaqi</p></header><div id="file"><!--文件上传--><h2>&nbsp;&nbsp;文件上传</h2><form action="upload_file.php" method="post" enctype="multipart/form-data"><input type="file" name="myFile" id="test3" style="width: 100%;height: 30px; border-radius: 10px;-webkit-box-shadow: 0 0 5px rgba(0,113,241,1);" /><br/><input type="submit" value="上传" class="button_css" /></form><!--文件删除--><br /><br /><h2>&nbsp;&nbsp;文件删除</h2><form action="delete_file.php" method="post"><input  id="test1" name="filename" type="text"  readonly="readonly" style="width: 100%; height: 30px; border-radius: 10px;-webkit-box-shadow: 0 0 5px rgba(255,113,241,1);" value="" placeholder="请在右侧选择文件" /><input type="submit" value="点击删除" class="button_css" /></form><!--文件下载--><br /><br /><h2>&nbsp;&nbsp;文件下载</h2><form action="download_file.php" method="get"><input  id="test2" name="filename" type="text"  readonly="readonly" style="width: 100%;height: 30px; border-radius: 10px;-webkit-box-shadow: 0 0 5px rgba(0,113,241,1);" value="" placeholder="请在右侧选择文件" /><input type="submit" value="点击下载" class="button_css" /></form></div><div id="filelist"><h2 style="color: #33CCCC;">云盘内文件:</h2><hr width="100%" align="left"><br /><?php    ///查询目录下文件列表function getDirContent($path){if(!is_dir($path)){return false;}$arr = array();$data = scandir($path);foreach ($data as $value){if($value != '.' && $value != '..'){$arr[] = $value;}}return $arr;}if ($username_html=="") {echo "<h2>请登录</h2>";}else{$file =getDirContent("../upload/$username_html/");//print_r($file);//print_r($file[2]);$arrlength=count($file);?><ul><?phpfor($x=0;$x<$arrlength;$x++) {    //将目录下所有文件输出echo "<li><a href=\"javascript:changeText('$file[$x]')\";".">$file[$x]</a></li>";  //点击超链接自动向input中填入}?></ul><?php}?></div></article></main><footer class="footer"><p class="Disclaimer">pengjiaqi 版权所有,未经允许不得转载</p><p><a href="index.html">关于我们</a><a href="index.html">帮助</a></p><p>Copyright © 2020</p></footer>
</div>
<script>
function changeText(text)   //点击超链接向input填入内容
{var element1 = document.getElementById("test1");var element2 = document.getElementById("test2");element1.value = text;element2.value = text;
}
</script>
</body>
</html>

4.download_file.php(下载文件)
效果：选择云盘内文件，点击下载

代码：

<?phpsession_start();$username_html = $_SESSION["username_html"];//读取登录的用户if ($username_html=="") {header("refresh:1;url = http://localhost/Cloud/html/login.php");exit("请登录");}
/*******************************************下载*********************************************************/header("Content-Type:text/html;charset=utf8");$file_name = $_GET['filename'];$download_path = "../upload/$username_html/";if(!file_exists($download_path.$file_name)){//Header("Content-type:text/html;charset=utf-8");echo "文件不存在!</br>";exit;}else{$file=fopen($download_path.$file_name,"r");header('Content-Typr:application/octet-stream');header("Accept-Ranges: bytes");header("Content-Disposition:attachment;filename=".$file_name);header('Content-length:'.filesize($download_path.$file_name));readfile($download_path.$file_name);}/******************************end******************************************/
?>

5.delete_file.php(删除云盘内文件)
效果：后台操作，选择云盘内文件后，点击删除及删除。
代码：

<?php
session_start();
$username_html = $_SESSION["username_html"];//读取登录的用户
if ($username_html=="") {header("refresh:1;url = http://localhost/Cloud/html/login.php");exit("请登录");}
$path = "";if ($_SERVER["REQUEST_METHOD"] == "POST") {$filename = test_input($_POST["filename"]);//如果文件夹下有文件，或者目录，均不能删除成功 $file_path="../upload/$username_html/$filename"; if(is_file($file_path)) { if(unlink($file_path)) { header("refresh:0;url = http://localhost/Cloud/html/index.php");echo "删除成功，跳转到主页..."; } else { header("refresh:1;url = http://localhost/Cloud/html/index.php");echo "删除失败，跳转到主页..."; } } else { header("refresh:1;url = http://localhost/Cloud/html/index.php");echo "文件不存在，跳转到主页..."; }
}function test_input($data) {$data = trim($data);$data = stripslashes($data);$data = htmlspecialchars($data);return $data;
}?>

6.upload_file.php(文件上传)
效果：上传文件为后台操作，index选择好文件点击上传，文件会上传到云盘给改用户分配的空间
代码：

<?phpsession_start();$username_html = $_SESSION["username_html"];header("Content_type:text/html;charset=utf8");if ($username_html=="") {header("refresh:1;url = http://localhost/Cloud/html/login.php");exit("请登录");}$imgname = $_FILES['myFile']['name'];$tmp = $_FILES['myFile']['tmp_name'];$error=$_FILES['myFile']['error'];move_uploaded_file($tmp,"../upload/$username_html/".iconv("UTF-8", "gbk",$imgname));if ($error==0) {header("refresh:0;url = http://localhost/Cloud/html/index.php");echo "上传成功！跳转至主页...";}else{switch ($error){case 1:header("refresh:1;url = http://localhost/Cloud/html/index.php");echo "超过了上传文件的最大值，请上传400M以下文件！跳转至主页...";break;case 2:header("refresh:1;url = http://localhost/Cloud/html/index.php");echo "上传文件过多，请一次上传20个及以下文件！跳转至主页...";break;case 3:header("refresh:1;url = http://localhost/Cloud/html/index.php");echo "文件并未完全上传，请再次尝试！跳转至主页...";break;case 4:header("refresh:1;url = http://localhost/Cloud/html/index.php");echo "未选择上传文件！跳转至主页...";break;case 5:header("refresh:1;url = http://localhost/Cloud/html/index.php");echo "上传文件为0!跳转至主页...";break;}
}?>

7.cancellation.php(注销)
效果：点击注销后，清除登录信息。
代码：

<?phpsession_start();$_SESSION = array();session_destroy();header("refresh:1;url = http://localhost/Cloud/html/login.php");echo "跳转至主页...";?>

8.wechat(社交娱乐)
效果：代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>加个微信QQ呀</title>
</head>
<body><h1>加个微信QQ呀</h1><div style="width: 300px"><img src="imgs/wechat.jpg" width="300px"></div><div style="width: 300px"><img src="imgs/qq.jpg" width="300px"></div>
</body>
</html>

文件夹 css 下代码

1.hangge.css

article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary {  display: block;
}*{margin: 0px;padding: 0px;
}body {width: 100%;height: auto;font-size: medium;font-family: "Helvetica","Hiragino Sans GB","Microsoft Yahei", sans-serif;
}a {color: #999;text-decoration: none;cursor: pointer
}a:hover {color: #5188a6;text-decoration: none
}#wrapper {width: 100%;
}#nav {display: inline-block;float: right;font-size: 1.25em;margin-top: 5px;margin-right: 10px;}header.SiteHeader {height: 40px;padding: 10px;background: #000000;
}aside.NavSidebar
{ padding: 5px 15px 5px 15px;width: 12%;height: 660px;background-color:#f9f9f9;font-size: small;float:left;
}aside.NavSidebar h2 {color: #6B6E3F;border-bottom: thin #6B6E3F solid;margin-bottom: 10px;margin-top: 20px;
}aside.NavSidebar ul {padding-left: 15px;
}aside.NavSidebar li {padding-bottom: 8px;
}aside.NavSidebar img {margin-top: 20px;border: white solid 4px;
}.Content {padding: 20px;margin-left:233px;
}.Content .LeadIn {font-weight: bold;font-size: large;font-variant: small-caps;
}.Content h3 {color: #24486C;margin-bottom: 2px;font-size: medium;
}.Content p {margin-top: 0px;
}header.ArticleHeader {padding: 10px;margin: 10px;text-align: center;
}header.inner {max-width: 65em;width: calc(100% - 6em);margin: 0 auto;}.logo {font-family: 'Pacifico', cursive;display: inline-block;height: inherit;left: 10px;line-height: inherit;margin: 0;padding: 0;position: absolute;top: 10px;color: #DDDDDD;font-size: 1.75em;text-transform: none;font-weight: normal;padding: 0;}header.ArticleHeader h2 { font-size: xx-large;
}header.ArticleHeader h3 {margin-top: 8px;font-weight: bold;
}header.ArticleHeader .Byline {margin-top: 8px;font-style: italic;font-size: small;
}footer {height: 50px;background: #333333;color:#c0c0c0;padding: 10px;text-align: center;font-size: x-small;  clear:both;
}footer .Disclaimer {font-style: italic;
}footer p {margin: 3px;
}#filelist{float:right; width: 20%;margin-right: 25%;height:auto;
}#file{float:left; width: 30%;margin-left:15%;height: auto;
}
.button_css{margin-top: 5px;float: right;background-color: #3300FF;border: none;color: white;padding: 10px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;border-radius: 15px;
}#test1,#test2,#test3{font-size: 16px;text-align: center;
}

2.styles.css

body {font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;
}
body ::-webkit-input-placeholder {/* WebKit browsers */font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;
}
body :-moz-placeholder {/* Mozilla Firefox 4 to 18 */font-family: 'Source Sans Pro', sans-serif;color: white;opacity: 1;font-weight: 300;
}
body ::-moz-placeholder {/* Mozilla Firefox 19+ */font-family: 'Source Sans Pro', sans-serif;color: white;opacity: 1;font-weight: 300;
}
body :-ms-input-placeholder {/* Internet Explorer 10+ */font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;
}
form label.error {width: 200px;margin-left: 8px;color: Red;
}
.wrapper {/* background: #50a3a2;background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); */opacity: 0.8;position: absolute;top: 50%;left: 0;width: 100%;height: 600px;margin-top: -300px;overflow: hidden;}.wrapper.form-success .container h1 {-webkit-transform: translateY(85px);-ms-transform: translateY(85px);transform: translateY(85px);
}
.container {max-width: 600px;margin: 0 auto;padding: 40px 0;height: 400px;text-align: center;
}
.container h1 {font-size: 40px;-webkit-transition-duration: 1s;transition-duration: 1s;-webkit-transition-timing-function: ease-in-put;transition-timing-function: ease-in-put;font-weight: 200;
}
form {padding: 20px 0;position: relative;z-index: 2;
}
form input[type="text"],
form input[type="password"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;border: 1px solid rgba(255, 255, 255, 0.4);background-color: rgba(255, 255, 255, 0.2);width: 250px;border-radius: 3px;padding: 10px 15px;margin: 0 auto 10px auto;display: block;text-align: center;font-size: 18px;color: white;-webkit-transition-duration: 0.25s;transition-duration: 0.25s;font-weight: 300;
}
form input[type="text"]:hover,
form input[type="password"]:hover{background-color: rgba(255, 255, 255, 0.4);
}
form input[type="text"]:focus,
form input[type="password"]:focus {background-color: white;width: 300px;color: #53e3a6;
}
form button {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;background-color: white;border: 0;padding: 10px 15px;color: #53e3a6;border-radius: 3px;width: 250px;cursor: pointer;font-size: 18px;-webkit-transition-duration: 0.25s;transition-duration: 0.25s;
}
form button:hover {background-color: #f5f7f9;
}
.bg-bubbles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;
}
.bg-bubbles li {position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: -160px;-webkit-animation: square 25s infinite;animation: square 25s infinite;-webkit-transition-timing-function: linear;transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {left: 10%;
}
.bg-bubbles li:nth-child(2) {left: 20%;width: 80px;height: 80px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 17s;animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {left: 25%;-webkit-animation-delay: 4s;animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {left: 40%;width: 60px;height: 60px;-webkit-animation-duration: 22s;animation-duration: 22s;background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {left: 70%;
}
.bg-bubbles li:nth-child(6) {left: 80%;width: 120px;height: 120px;-webkit-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {left: 32%;width: 160px;height: 160px;-webkit-animation-delay: 7s;animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {left: 55%;width: 20px;height: 20px;-webkit-animation-delay: 15s;animation-delay: 15s;-webkit-animation-duration: 40s;animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {left: 25%;width: 10px;height: 10px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 40s;animation-duration: 40s;background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {left: 90%;width: 160px;height: 160px;-webkit-animation-delay: 11s;animation-delay: 11s;
}}

文件夹 js 下代码

js/localization/messages_zh.js

(function( factory ) {if ( typeof define === "function" && define.amd ) {define( ["jquery", "../jquery.validate"], factory );} else if (typeof module === "object" && module.exports) {module.exports = factory( require( "jquery" ) );} else {factory( jQuery );}
}(function( $ ) {/** Translated default messages for the jQuery validation plugin.* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)*/
$.extend( $.validator.messages, {required: "这是必填字段",remote: "请修正此字段",email: "请输入有效的电子邮件地址",url: "请输入有效的网址",date: "请输入有效的日期",dateISO: "请输入有效的日期 (YYYY-MM-DD)",number: "请输入有效的数字",digits: "只能输入数字",creditcard: "请输入有效的信用卡号码",equalTo: "你的输入不相同",extension: "请输入有效的后缀",maxlength: $.validator.format( "最多可以输入 {0} 个字符" ),minlength: $.validator.format( "最少要输入 {0} 个字符" ),rangelength: $.validator.format( "请输入长度在 {0} 到 {1} 之间的字符串" ),range: $.validator.format( "请输入范围在 {0} 到 {1} 之间的数值" ),max: $.validator.format( "请输入不大于 {0} 的数值" ),min: $.validator.format( "请输入不小于 {0} 的数值" )
} );
return $;
}));

2.jquery.validate.min.js/jquery-2.1.1.min.js/md5.js
可以通过js文件名，百度自行下载
链接：zip
//****** 代码部分end *******///

数据库

例：(此处是我的数据库，里面已经填了数据，你们呢建数据库时应该为空)

slq代码:(先建立cloud数据库然后运行sql文件即可)

/*Navicat Premium Data TransferSource Server         : MysqlSource Server Type    : MySQLSource Server Version : 80019Source Host           : localhost:3306Source Schema         : cloudTarget Server Type    : MySQLTarget Server Version : 80019File Encoding         : 65001Date: 29/06/2020 12:55:44
*/SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (`id` int(0) NOT NULL AUTO_INCREMENT,`name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`register_time` datetime(0) NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP(0),PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 22 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;SET FOREIGN_KEY_CHECKS = 1;

上传、下载文件设置参数

其中，phpini设置：
1，post_max_size = 501M
2，max_file_uploads = 20
3，post_max_size = 30M
参考：
PHP 简单实现文件上传、保存、下载的功能
使用 PHP 实现文件的上传和保存

PHP网站设计 ---- 网盘(实现用户注册、登录，文件上传、下载、删除、查看等功能)相关推荐

仿163网盘无刷新多文件上传系统
这个仿163网盘无刷新多文件上传系统,并没有用使用.net的控件,完全的手工制作.前台基本上是静态的,跟后台没有关系,所以后台用什么语言做都可以(后面有各个版本的实例下载). 本来觉得这个系统会很复杂 ...
uc浏览器邀请码_阿里云Teambition网盘收到邀请码，上传下载不限速！！！
微信公众号更新以后,推送不是按照优先来的:你们可以把我的微信公众号点击设置为星标,以便于及时的接收信息. 哈喽!大家好,我是斜杠君,每天早上八点推文(偶然会凌晨),还有关键词是最下面的数字.底部点赞. ...
树莓派3B+采用花生棒进行内网穿透，从拆箱到实现SSH远程控制与sftp简单远程文件上传下载
树莓派3B+采用花生棒进行内网穿透,使用sftp实现远程控制与简单远程文件上传下载) 准备步骤物理环境搭建关于基础配置的博文推荐树莓派联网配置基础联网配置静态ip 花生壳内网穿透常用远程端 ...
网安基础学习之“文件上传漏洞原理与实现”
网安基础学习之"文件上传漏洞原理与实现" 近期新闻头条上报出了"长沙市场监管局网站被上传了黄色页面",经过长沙市公安局网技支队的排查,该门户网站后台编辑器存在* ...
项目_功能模块_基于Spring Boot的文件上传下载功能的设计与实现
文章目录基于Spring Boot的文件上传下载功能模块的设计与实现 1.前言 2.技术栈 3.关键源码 4.实现效果 4.1.登录 4.2.文件列表 4.3.上传文件测试 4.3.1.测试图片 4 ...
直链文件上传下载网站分享(二)
直链文件上传下载网站分享(一) 直链文件上传下载网站分享(二) 八.GM帮登陆器列表空间九.墨涩网外链系统十.树洞外链十一.豆子外链十二.凡人外链十三.图钉外链十四.小西外链直链文件上传 ...
文件上传下载流程设计
最近在写一个文件上传下载的服务端和客户端,在开发之前把交互流程大概设计了一下顺便分享出来,流程主要包括验证,交口端口验证,文件上和文件下载等功能.之于文件删除,在线压缩和解压等流程相对简单所以就不列出 ...
springboot文件上传下载实战 —— 登录功能、展示所有文件
springboot文件上传下载实战创建项目 pom.xml 数据库建表与环境准备建表SQL 配置文件 application.properties 整体架构前端页面登录页面 login.ht ...
阿里云oss 使用, 基于Nginx 配置云服务器+oss的内网访问 , 及使用Java SDK 完成上传,下载,删除,查询文件列表操作
一.同阿里产品,云服务器和存储对象oss-配置内网访问阿里存储对象oss 地址: https://oss.console.aliyun.com/overview 配置须知通过Nginx 进行网络转 ...

PHP网站设计 ---- 网盘(实现用户注册、登录，文件上传、下载、删除、查看等功能)