//列表部分
<?php
$contents=file_get_contents("storage.json");
$cons=json_decode($contents);
// var_dump($cons);
?>
<head>
<meta charset="UTF-8">
<title>音乐列表</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
img{
width: 50px;
}
</style>
</head>
<body>
<div class="container py-5">
<h1 class="display-4">音乐列表</h1>
<hr>
<div class="mb-3">
<a href="add.php" class="btn btn-secondary btn-sm">添加</a>
</div>
<table class="table table-bordered table-striped table-hover">
<thead class="thead-dark">
<tr>
<th class="text-center">标题</th>
<th class="text-center">歌手</th>
<th class="text-center">海报</th>
<th class="text-center">音乐</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody class="text-center">
<?php foreach ($cons as $key ): ?>
<tr>
<td><?php echo $key->title; ?></td>
<td><?php echo $key->artist; ?></td>
<td><img src="<?php echo $key->images; ?>" alt=""></td>
<td><audio src="<?php echo $key->source ;?>" controls></audio></td>
<td><button class="btn btn-danger btn-sm">删除</button></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
</body>
</html>
//增加数据的部分
<?php
function addlist(){
if(empty($_POST['title'])){
$GLOBALS['message'] = "请输入标题名";
return;
}
if(empty($_POST['artist'])) {
$GLOBALS['message'] = "请输入歌手名";
return;
}
// 先判断表单域中是否有文件域
if(empty($_FILES['images'])){
$GLOBALS['message'] = '请提交图片文件';
return;
}
$images=$_FILES['images'];
//判断文件是否上传成功
if($images['error']!==UPLOAD_ERR_OK){
$GLOBALS['message'] = "请上传图片文件";
return;
}
//限制文件上传大小
if($images['size'] > 1 * 1024 *1024){
$GLOBALS['message'] = "上传图片文件过大";
return;
}
//限制文件上传类型
$images_type=array('image/jpeg','image/jpg','image/png','image/gif');
if(!in_array($images['type'], $images_type)){
$GLOBALS['message'] = '图片格式不支持';
return;
}
$target1='./uploads/'.uniqid().'-'.$images['name'];
// var_dump($target);
if(!move_uploaded_file($images['tmp_name'], $target1)){
$GLOBALS['message'] = '图片上传失败';
return;
}
//=== 音频文件 =====
if(empty($_FILES['source'])){
$GLOBALS['message'] = '请上传音频文件';
return;
}
$source=$_FILES['source'];
if($source['error']!== UPLOAD_ERR_OK){
$GLOBALS['message'] = '请上传音频文件';
return;
}
//限制上传文件大小
if ($source['size'] > 10 * 1024 * 1024) {
$GLOBALS['message'] = '上传文件过大';
return;
}
if ($source['size'] < 1 * 1024 * 1024) {
$GLOBALS['message'] = '上传文件过大';
return;
}
//限制上传文件类型
$source_type=array('audio/mp3','audio/wma');
if(!in_array($source['type'], $source_type)){
$GLOBALS['message'] = '音频格式不支持';
return;
}
//移动音频文件
$target2='./uploads/'.'-'.$source['name'];
if(!move_uploaded_file($source['tmp_name'], $target2)){
$GLOBALS['message'] = '音频上传失败';
return;
}
//获取存储数据的文件内容
$contents=file_get_contents('storage.json');
$contents=json_decode($contents);
$contents[]=array(
"id"=>uniqid(),
"title"=>$_POST['title'],
"artist"=>$_POST['artist'],
"images"=>$target1,
"source"=>$target2,
);
$cons=json_encode($contents);
// var_dump($cons);
file_put_contents('storage.json', $cons);
//跳往网页
header("Location: list.php");
}//end function
if($_SERVER['REQUEST_METHOD'] =="POST"){
addlist();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加新音乐</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="container py-5">
<h1 class="display-4">添加新音乐</h1>
<hr>
<?php if (isset($message)) : ?>
<div class="alert alert-danger" role="alert">
<?php echo $message; ?>
</div>
<?php endif ?>
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" enctype="multipart/form-data" autocomplete="off">
<div class="form-group">
<label for="title">标题</label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<label for="artist">歌手</label>
<input type="text" class="form-control" id="artist" name="artist">
</div>
<div class="form-group">
<label for="images">海报</label>
<input type="file" class="form-control" id="images" name="images" accept="image/*">
</div>
<div class="form-group">
<label for="source">音乐</label>e
<!-- accept 可以限制文件域能够选择的文件种类,值是 MIME Type -->
<input type="file" class="form-control" id="source" name="source" accept="audio/*">
</div>
<button class="btn btn-primary btn-block">保存</button>
</form>
</div>
</body>
</html>