php:简单的音乐上传与展示
知识点
文件目录
├── add.php
├── bootstrap.css
├── list.php
├── storage.json
├── uploads(空文件夹)
核心代码
// list.php
// 获取文件中记录的数据,并展示到表格中(动态生成表格的HTML标签)
$contents = file_get_contents('storage.json');
// $contents => JSON 格式的字符串
// 把 JSON 格式的字符串转换为对象的过程叫做反序列化// json_decode 默认反序列化时 将 JSON 中的对象转换为 PHP 中 stdClass 类型的对象
$data = json_decode($contents, true);
// $data => []?>
<!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><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"> foreach ($data as $item): ?><tr><td> echo $item['title'] ?></td><td> echo $item['artist'] ?></td><td><img src="$item['images'][0] ?>" alt=""></td><td><audio src="$item['source'] ?>" controls></audio></td><td><button class="btn btn-danger btn-sm">删除</button></td></tr> endforeach ?></tbody></table></div>
</body>
</html>
// add.php
/*** 只是在表单提交时执行*/
function add_music () {// 目标// 将用户提交过来的数据保存到 storage.json 中// 步骤// 1. 接收并校验// 2. 持久化// 3. 响应// 文本框校验// =====================================================if (empty($_POST['title'])) {$GLOBALS['error_message'] = '请输入标题';return;}if (empty($_POST['artist'])) {$GLOBALS['error_message'] = '请输入歌手';return;}// 校验上传文件// =====================================================if (empty($_FILES['source'])) {// 客户端提交的表单中没有 source 文件域$GLOBALS['error_message'] = '请正确提交文件';return;}$source = $_FILES['source'];// 判断用户是否选择了文件if ($source['error'] !== UPLOAD_ERR_OK) {$GLOBALS['error_message'] = '请选择音乐文件';return;}// 校验文件的大小if ($source['size'] > 10 * 1024 * 1024) {$GLOBALS['error_message'] = '音乐文件过大';return;}if ($source['size'] < 1 * 1024 * 1024) {$GLOBALS['error_message'] = '音乐文件过小';return;}// 校验类型$allowed_types = array('audio/mp3', 'audio/wma');if (!in_array($source['type'], $allowed_types)) {$GLOBALS['error_message'] = '这是不支持的音乐格式';return;}// 音乐文件已经上传成功,但是还在临时目录中// 一般情况会将上传的文件重命名$target = './uploads/' . uniqid() . '-' . $source['name'];if (!move_uploaded_file($source['tmp_name'], $target)) {$GLOBALS['error_message'] = '上传音乐失败';return;}// =========== 接收图片 ==============if (empty($_FILES['images'])) {// 客户端提交的表单中没有 source 文件域$GLOBALS['error_message'] = '请正确提交文件';return;}$images = $_FILES['images'];// 判断用户是否选择了文件if ($images['error'] !== UPLOAD_ERR_OK) {$GLOBALS['error_message'] = '请选择图片文件';return;}// 校验文件的大小if ($images['size'] > 1 * 1024 * 1024) {$GLOBALS['error_message'] = '图片文件过大';return;}// 校验类型$allowed_types = array('image/jpeg', 'image/png', 'image/gif');if (!in_array($images['type'], $allowed_types)) {$GLOBALS['error_message'] = '这是不支持的图片格式';return;}// 音乐文件已经上传成功,但是还在临时目录中// 一般情况会将上传的文件重命名$target = './uploads/' . uniqid() . '-' . $images['name'];if (!move_uploaded_file($images['tmp_name'], $target)) {$GLOBALS['error_message'] = '上传图片失败';return;}// 图片音乐都上传成功$title = $_POST['title'];$artist = $_POST['artist'];$images = '图片';$source = '音乐';$origin = json_decode(file_get_contents('storage.json'), true);$origin[] = array('id' => uniqid(),'title' => $_POST['title'],'artist' => $_POST['artist'],'images' => '123','source' => '1231',);$json = json_encode($origin);file_put_contents('storage.json', $json);// 跳转回列表页header('Location: list.php');
}if ($_SERVER['REQUEST_METHOD'] === 'POST') {add_music();
}?>
<!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> if (isset($error_message)): ?><div class="alert alert-danger" role="alert"> echo $error_message; ?></div> endif ?><form action="$_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"></div><div class="form-group"><label for="source">音乐</label><!-- 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>
[{"id": "59d632855434e","title": "\u9519\u8fc7","artist": "\u6881\u548f\u742a","images": ["\/uploads\/img\/1.jpg"],"source": "\/uploads\/mp3\/1.mp3"},{"id": "59d632855434f","title": "\u5f00\u59cb\u61c2\u4e86","artist": "\u5b59\u71d5\u59ff","images": ["\/uploads\/img\/2.jpg"],"source": "\/uploads\/mp3\/2.mp3"},{"id": "59d6328554350","title": "\u4e00\u751f\u4e2d\u6700\u7231","artist": "\u8c2d\u548f\u9e9f","images": ["\/uploads\/img\/3.jpg"],"source": "\/uploads\/mp3\/3.mp3"},{"id": "59d6328554351","title": "\u7231\u5728\u6df1\u79cb","artist": "\u8c2d\u548f\u9e9f","images": ["\/uploads\/img\/4.jpg"],"source": "\/uploads\/mp3\/4.mp3"},{"id": "59f0592aa33d8","title": "123123","artist": "123123","images": "123","source": "1231"}
]
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
