501day（音乐列表案例(add-todos部分)）

最新推荐文章于 2024-02-20 15:58:37 发布

原创最新推荐文章于 2024-02-20 15:58:37 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个用于上传音乐及其相关信息的HTML表单设计，包括音乐标题、艺术家名称、海报图片和音乐文件的输入字段，使用PHP处理POST请求。

《2019年2月18日》【连续501天】

标题：音乐列表案例(add-todos部分)；

内容：

<?php

function add () {
  // 目标：接收客户端提交的数据和文件，最终保存到数据文件中

  // TODO: 接收提交的文本内容

  // TODO: 接收海报文件

  // TODO: 接收音乐文件

  // TODO:
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  add();
}

?>
<!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>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
      <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>
        <!-- multiple 可以让一个文件域多选 -->
        <input type="file" class="form-control" id="images" name="images[]" accept="image/*" multiple>
      </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>