admin管理员组文章数量:1563235
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>
<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>
<?php
if ($_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">
<?php
session_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> 文件上传</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> 文件删除</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> 文件下载</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>
<?php
for($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(下载文件)
效果：选择云盘内文件，点击下载
代码：
<?php
session_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选择好文件点击上传，文件会上传到云盘给改用户分配的空间
代码：
<?php
session_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(注销)
效果：点击注销后，清除登录信息。
代码：
<?php
session_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 Transfer
Source Server : Mysql
Source Server Type : MySQL
Source Server Version : 80019
Source Host : localhost:3306
Source Schema : cloud
Target Server Type : MySQL
Target Server Version : 80019
File Encoding : 65001
Date: 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网站设计 ---- 网盘(实现用户注册、登录，文件上传、下载、删除、查看等功能) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1727495390a1117555.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论