Skip to content

Instantly share code, notes, and snippets.

@codeforfun-jp

codeforfun-jp/list.php Secret

Last active December 6, 2021 04:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codeforfun-jp/a7f9bd36bea10014a920b4a74b394354 to your computer and use it in GitHub Desktop.
Save codeforfun-jp/a7f9bd36bea10014a920b4a74b394354 to your computer and use it in GitHub Desktop.
Download ZIP
Save Image File with PHP & MySQL 1-2
Raw
list.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Image Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-8 border-right">
<ul class="list-unstyled">
<?php for ($i = 0; $i < 3; $i ++): ?>
<li class="media mt-5">
<a href="#lightbox" data-toggle="modal" data-slide-to="<?= $i; ?>">
<img src="cat.jpg" width="100" height="auto" class="mr-3">
</a>
<div class="media-body">
<h5>Cat.jpg (123.45KB)</h5>
<a href="#"><i class="far fa-trash-alt"></i> 削除</a>
</div>
</li>
<?php endfor; ?>
</ul>
</div>
<div class="col-md-4 pt-4 pl-4">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label>画像を選択</label>
<input type="file" name="image" required>
</div>
<button type="submit" class="btn btn-primary">保存</button>
</form>
</div>
</div>
</div>
<div class="modal carousel slide" id="lightbox" tabindex="-1" role="dialog" data-ride="carousel">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<ol class="carousel-indicators">
<?php for ($i = 0; $i < 3; $i++): ?>
<li data-target="#lightbox" data-slide-to="<?= $i; ?>" <?php if ($i == 0) echo 'class="active"'; ?>></li>
<?php endfor; ?>
</ol>
<div class="carousel-inner">
<?php for ($i = 0; $i < 3; $i++): ?>
<div class="carousel-item <?php if ($i == 0) echo 'active'; ?>">
<img src="cat.jpg" class="d-block w-100">
</div>
<?php endfor; ?>
</div>
<a class="carousel-control-prev" href="#lightbox" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#lightbox" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment