I am creating a blogging system where I want the user to be able to upload multiple images that will then display in a gallery on the post page. I was wondering how I could go about getting multiple images to upload and then display only the images that are attributed to that specific post in the gallery?
This is not a WordPress blog.
This is my first PHP project I’ve done, so any help would be appreciated. Thank you in advance to anyone who can help point me in the right direction.
Here is my newpost.php that allows the user to create their post:
<?php
session_start();
$msg = "";
//connect to the database
include('../includes/db_connect.php');
if (!isset($_SESSION['user_id'])) {
header('Location: login.php');
exit();
}
if(isset($_POST['submit'])){
$target ="images/".basename($_FILES['image']['name']);
$uploads_dir = 'image/';
$image = basename($_FILES['image']['name']);
$title = $_POST['title'];
$price = $_POST['price'];
$description = $_POST['description'];
$category = $_POST['category'];
$title = $db->real_escape_string($title);
$price = $db->real_escape_string($price);
$description = $db->real_escape_string($description);
$user_id = $_SESSION['user_id'];
$description = htmlentities($description);
if($title && $price && $description && $category && $image){
$query = $db->query("INSERT INTO post (user_id, title, price, description, category_id, image) VALUES('$user_id', '$title', '$price', '$description', '$category', '$image')");
if($query){
echo "product posted";
}else{
echo "error";
}
}else{
echo "missing data";
}
if(move_uploaded_file($_FILES['image']['tmp_name'], $target)){
$msg = "Image uploaded successfully";
}else{
$msg = "There was an error uploading the file";
}
}
?>
Here’s the HTML form:
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label>IMAGE(S) *</label>
<input multiple="multiple" name="image[]" type="file" />
</div>
<div class="required">
* indicates a required field
</div>
<button type="submit" name="submit" value="Submit" class="btn btn-default">POST</button>
</form>
And here is the post.php where I want to display the multiple images:
PHP
<?php
//send user back to inventory page if page ids do not exist
if(!isset($_GET['id'])){
header('Location: index.php');
exit();
}else{
$id = $_GET['id'];
}
include('includes/db_connect.php');
if(!is_numeric($id)){
header('Location: index.php');
}
$sql = "SELECT title, description, price, image FROM post WHERE post_id='$id'";
$query = $db->query($sql);
if($query->num_rows !=1){
header('Location: index.php');
exit();
}
?>
HTML
<?php
$row = $query->fetch_object();
echo "<h1>".$row->title."</h1>";
echo "<div class="carousel slide article-slide" id="article-photo-carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner cont-slider">
<!-- IMAGES -->
<div class="item active">
<img alt="" title="" src='admin/images/".$row->image."'>
</div>
<div class="item">
<img alt="" title="" src='admin/images/".$row->image."'>
</div>
</div>
<!-- THUMBNAILS -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#article-photo-carousel">
<img alt="" src='admin/images/".$row->image."'>
</li>
<li class="" data-slide-to="1" data-target="#article-photo-carousel">
<img alt="" src='admin/images/".$row->image."'>
</li>
</ol>
</div>;
echo "<div class='dollar'>$".$row->price."</div>";
echo "<div class='descr'>".$row->description."</div>";
echo "<center><a href='index.php' class='goback'> Go Back </a></center>";
?>
And here is what my post table looks like:
CREATE TABLE `post` (
`post_id` int(11) NOT NULL,
`user_id` int(11) NOT NULL,
`title` varchar(255) NOT NULL,
`price` varchar(255) NOT NULL,
`category_id` int(11) NOT NULL,
`description` text NOT NULL,
`image` varchar(500) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;