How to Upload and display multiple images in PHP

Upload multiple images at once helps to reduce the time taking for uploading a large number of images to the server. It also provides a user-friendly way to upload multiple images to the server at once instead of one-by-one. Multiple image upload functionality is very useful for the dynamic gallery management section on the web application. It is also very useful for product management section where multiple images need to be uploaded for each product.

The multiple images can be uploaded on a single click using PHP. Not only the images but also you can upload data with images to the server using PHP and MySQL. In this tutorial, we will show you how to upload multiple imagesand manage (view, edit, and delete) data with PHP and MySQL.

In the example script, we will implement a gallery management system with multiple images using PHP and MySQL.

Fetch the gallery info from the database and list on the webpage.
Upload multiple images to the server and add form data to the database.
View gallery with multiple images.
Edit and update multiple images.
Delete gallery and multiple images.

Before getting started, take a look at the files structure of the multiple images upload management script.

multiple_image_upload_crud/
├── index.php
├── view.php
├── addEdit.php
├── postAction.php
├── DB.class.php
├── uploads/
│   └── images/
├── js/
│   └── jquery.min.js
├── bootstrap/
│   └── bootstrap.min.css
├── css/
│   └── style.css
└── images/

multiple_image_upload_crud/

├── index.php

├── view.php

├── addEdit.php

├── postAction.php

├── DB.class.php

├── uploads/

│ └── images/

├── js/

│ └── jquery.min.js

├── bootstrap/

│ └── bootstrap.min.css

├── css/

│ └── style.css

└── images/

Contents hide

1 Create Database Table

2 Database Class (DB.class.php)

3 Bootstrap Library

4 Gallery List (index.php)

5 Delete Gallery Images via AJAX

6 Display Multiple Images with Gallery Info (view.php)

7 Multiple Image Upload and Data Add/Edit Form (addEdit.php)

8 Upload Multiple Images, Add, Edit, and Delete Records (postAction.php)

8.1 Related posts:

Create Database Table

To store the gallery and image files information two tables need to be created in the database.

1. The following SQL creates a gallery table with some basic fields in the MySQL database.

CREATE TABLE `gallery` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE `gallery` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`created` datetime NOT NULL,

`modified` datetime NOT NULL,

`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

2. The following SQL creates a gallery_images table with parent gallery identifier field (gallery_id) in the MySQL database.

CREATE TABLE `gallery_images` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`gallery_id` int(11) NOT NULL,
`file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`uploaded_on` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE `gallery_images` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`gallery_id` int(11) NOT NULL,

`file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`uploaded_on` datetime NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Database Class (DB.class.php)

The DB class handles all the database related operations (connect, insert, update, and delete). Specify the database host ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your MySQL database credentials.

__construct() – Connect to the database with PHP and MySQLi Extension.
getRows() –
- Fetch gallery with images from the database based on the specified conditions.
- If single row requested, gallery data with all the respective images are return. Otherwise, only one image is returned with the gallery data.
getImgRow() – Fetch the image data from the database based on the specified ID.
insert() – Insert gallery data into the database.
insertImage() – Insert gallery images in the database.
update() – Update gallery data into the database.
delete() – Delete gallery data from the database.
deleteImage() – Delete image of the specific gallery from the database.

<?php 
/* 
* DB Class 
* This class is used for database related (connect, insert, update, and delete) operations 
* @author    CodexWorld.com 
* @url        http://www.mywebcode.com
* @license    http://www.mywebcode.com/license 
*/ 
class DB{ 
private $dbHost     = "localhost"; 
private $dbUsername = "root"; 
private $dbPassword = "root"; 
private $dbName     = "mywebcode"; 
private $galleryTbl = "gallery"; 
private $imgTbl     = "gallery_images"; 
public function __construct(){ 
if(!isset($this->db)){ 
// Connect to the database 
$conn = new mysqli($this->dbHost, $this->dbUsername, $this->dbPassword, $this->dbName); 
if($conn->connect_error){ 
die("Failed to connect with MySQL: " . $conn->connect_error); 
}else{ 
$this->db = $conn; 
} 
} 
} 
/* 
* Returns rows from the database based on the conditions 
* @param string name of the table 
* @param array select, where, order_by, limit and return_type conditions 
*/ 
public function getRows($conditions = array()){ 
$sql = 'SELECT '; 
$sql .= '*, (SELECT file_name FROM '.$this->imgTbl.' WHERE gallery_id = '.$this->galleryTbl.'.id ORDER BY id DESC LIMIT 1) as default_image'; 
$sql .= ' FROM '.$this->galleryTbl; 
if(array_key_exists("where",$conditions)){ 
$sql .= ' WHERE '; 
$i = 0; 
foreach($conditions['where'] as $key => $value){ 
$pre = ($i > 0)?' AND ':''; 
$sql .= $pre.$key." = '".$value."'"; 
$i++; 
} 
} 
if(array_key_exists("order_by",$conditions)){ 
$sql .= ' ORDER BY '.$conditions['order_by'];  
}else{ 
$sql .= ' ORDER BY id DESC ';  
} 
if(array_key_exists("start",$conditions) && array_key_exists("limit",$conditions)){ 
$sql .= ' LIMIT '.$conditions['start'].','.$conditions['limit'];  
}elseif(!array_key_exists("start",$conditions) && array_key_exists("limit",$conditions)){ 
$sql .= ' LIMIT '.$conditions['limit'];  
} 
$result = $this->db->query($sql); 
if(array_key_exists("return_type",$conditions) && $conditions['return_type'] != 'all'){ 
switch($conditions['return_type']){ 
case 'count': 
$data = $result->num_rows; 
break; 
case 'single': 
$data = $result->fetch_assoc(); 
if(!empty($data)){ 
$sql = 'SELECT * FROM '.$this->imgTbl.' WHERE gallery_id = '.$data['id']; 
$result = $this->db->query($sql); 
$imgData = array(); 
if($result->num_rows > 0){ 
while($row = $result->fetch_assoc()){ 
$imgData[] = $row; 
} 
} 
$data['images'] = $imgData; 
} 
break; 
default: 
$data = ''; 
} 
}else{ 
if($result->num_rows > 0){ 
while($row = $result->fetch_assoc()){ 
$data[] = $row; 
} 
} 
} 
return !empty($data)?$data:false; 
} 
public function getImgRow($id){ 
$sql = 'SELECT * FROM '.$this->imgTbl.' WHERE id = '.$id; 
$result = $this->db->query($sql); 
return ($result->num_rows > 0)?$result->fetch_assoc():false; 
} 
/* 
* Insert data into the database 
* @param string name of the table 
* @param array the data for inserting into the table 
*/ 
public function insert($data){ 
if(!empty($data) && is_array($data)){ 
$columns = ''; 
$values  = ''; 
$i = 0; 
if(!array_key_exists('created',$data)){ 
$data['created'] = date("Y-m-d H:i:s"); 
} 
if(!array_key_exists('modified',$data)){ 
$data['modified'] = date("Y-m-d H:i:s"); 
} 
foreach($data as $key=>$val){ 
$pre = ($i > 0)?', ':''; 
$columns .= $pre.$key; 
$values  .= $pre."'".$this->db->real_escape_string($val)."'"; 
$i++; 
} 
$query = "INSERT INTO ".$this->galleryTbl." (".$columns.") VALUES (".$values.")"; 
$insert = $this->db->query($query); 
return $insert?$this->db->insert_id:false; 
}else{ 
return false; 
} 
} 
public function insertImage($data){ 
if(!empty($data) && is_array($data)){ 
$columns = ''; 
$values  = ''; 
$i = 0; 
if(!array_key_exists('uploaded_on',$data)){ 
$data['uploaded_on'] = date("Y-m-d H:i:s"); 
} 
foreach($data as $key=>$val){ 
$pre = ($i > 0)?', ':''; 
$columns .= $pre.$key; 
$values  .= $pre."'".$this->db->real_escape_string($val)."'"; 
$i++; 
} 
$query = "INSERT INTO ".$this->imgTbl." (".$columns.") VALUES (".$values.")"; 
$insert = $this->db->query($query); 
return $insert?$this->db->insert_id:false; 
}else{ 
return false; 
} 
} 
/* 
* Update data into the database 
* @param string name of the table 
* @param array the data for updating into the table 
* @param array where condition on updating data 
*/ 
public function update($data, $conditions){ 
if(!empty($data) && is_array($data)){ 
$colvalSet = ''; 
$whereSql = ''; 
$i = 0; 
if(!array_key_exists('modified',$data)){ 
$data['modified'] = date("Y-m-d H:i:s"); 
} 
foreach($data as $key=>$val){ 
$pre = ($i > 0)?', ':''; 
$colvalSet .= $pre.$key."='".$this->db->real_escape_string($val)."'"; 
$i++; 
} 
if(!empty($conditions)&& is_array($conditions)){ 
$whereSql .= ' WHERE '; 
$i = 0; 
foreach($conditions as $key => $value){ 
$pre = ($i > 0)?' AND ':''; 
$whereSql .= $pre.$key." = '".$value."'"; 
$i++; 
} 
} 
$query = "UPDATE ".$this->galleryTbl." SET ".$colvalSet.$whereSql; 
$update = $this->db->query($query); 
return $update?$this->db->affected_rows:false; 
}else{ 
return false; 
} 
} 
/* 
* Delete data from the database 
* @param string name of the table 
* @param array where condition on deleting data 
*/ 
public function delete($conditions){ 
$whereSql = ''; 
if(!empty($conditions)&& is_array($conditions)){ 
$whereSql .= ' WHERE '; 
$i = 0; 
foreach($conditions as $key => $value){ 
$pre = ($i > 0)?' AND ':''; 
$whereSql .= $pre.$key." = '".$value."'"; 
$i++; 
} 
} 
$query = "DELETE FROM ".$this->galleryTbl.$whereSql; 
$delete = $this->db->query($query); 
return $delete?true:false; 
} 
public function deleteImage($conditions){ 
$whereSql = ''; 
if(!empty($conditions)&& is_array($conditions)){ 
$whereSql .= ' WHERE '; 
$i = 0; 
foreach($conditions as $key => $value){ 
$pre = ($i > 0)?' AND ':''; 
$whereSql .= $pre.$key." = '".$value."'"; 
$i++; 
} 
} 
$query = "DELETE FROM ".$this->imgTbl.$whereSql; 
$delete = $this->db->query($query); 
return $delete?true:false; 
} 
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

<?php

* DB Class

* This class is used for database related (connect, insert, update, and delete) operations

* @author CodexWorld.com

* @url http://www.mywebcode.com

* @license http://www.mywebcode.com/license

class DB{

private $dbHost = "localhost";

private $dbUsername = "root";

private $dbPassword = "root";

private $dbName = "mywebcode";

private $galleryTbl = "gallery";

private $imgTbl = "gallery_images";

public function __construct(){

if(!isset($this->db)){

// Connect to the database

$conn = new mysqli($this->dbHost, $this->dbUsername, $this->dbPassword, $this->dbName);

if($conn->connect_error){

die("Failed to connect with MySQL: " . $conn->connect_error);

}else{

$this->db = $conn;

}

* Returns rows from the database based on the conditions

* @param string name of the table

* @param array select, where, order_by, limit and return_type conditions

public function getRows($conditions = array()){

$sql = 'SELECT ';

$sql .= '*, (SELECT file_name FROM '.$this->imgTbl.' WHERE gallery_id = '.$this->galleryTbl.'.id ORDER BY id DESC LIMIT 1) as default_image';

$sql .= ' FROM '.$this->galleryTbl;

if(array_key_exists("where",$conditions)){

$sql .= ' WHERE ';

$i = 0;

foreach($conditions['where'] as $key => $value){

$pre = ($i > 0)?' AND ':'';

$sql .= $pre.$key." = '".$value."'";

$i++;

}

if(array_key_exists("order_by",$conditions)){

$sql .= ' ORDER BY '.$conditions['order_by'];

}else{

$sql .= ' ORDER BY id DESC ';

}

if(array_key_exists("start",$conditions) && array_key_exists("limit",$conditions)){

$sql .= ' LIMIT '.$conditions['start'].','.$conditions['limit'];

}elseif(!array_key_exists("start",$conditions) && array_key_exists("limit",$conditions)){

$sql .= ' LIMIT '.$conditions['limit'];

}

$result = $this->db->query($sql);

if(array_key_exists("return_type",$conditions) && $conditions['return_type'] != 'all'){

switch($conditions['return_type']){

case 'count':

$data = $result->num_rows;

break;

case 'single':

$data = $result->fetch_assoc();

if(!empty($data)){

$sql = 'SELECT * FROM '.$this->imgTbl.' WHERE gallery_id = '.$data['id'];

$result = $this->db->query($sql);

$imgData = array();

if($result->num_rows > 0){

while($row = $result->fetch_assoc()){

$imgData[] = $row;

}

$data['images'] = $imgData;

}

break;

default:

$data = '';

}

}else{

if($result->num_rows > 0){

while($row = $result->fetch_assoc()){

$data[] = $row;

}

return !empty($data)?$data:false;

}

public function getImgRow($id){

$sql = 'SELECT * FROM '.$this->imgTbl.' WHERE id = '.$id;

$result = $this->db->query($sql);

return ($result->num_rows > 0)?$result->fetch_assoc():false;

}

* Insert data into the database

* @param string name of the table

* @param array the data for inserting into the table

public function insert($data){

if(!empty($data) && is_array($data)){

$columns = '';

$values = '';

$i = 0;

if(!array_key_exists('created',$data)){

$data['created'] = date("Y-m-d H:i:s");

}

if(!array_key_exists('modified',$data)){

$data['modified'] = date("Y-m-d H:i:s");

}

foreach($data as $key=>$val){

$pre = ($i > 0)?', ':'';

$columns .= $pre.$key;

$values .= $pre."'".$this->db->real_escape_string($val)."'";

$i++;

}

$query = "INSERT INTO ".$this->galleryTbl." (".$columns.") VALUES (".$values.")";

$insert = $this->db->query($query);

return $insert?$this->db->insert_id:false;

}else{

return false;

}

public function insertImage($data){

if(!empty($data) && is_array($data)){

$columns = '';

$values = '';

$i = 0;

if(!array_key_exists('uploaded_on',$data)){

$data['uploaded_on'] = date("Y-m-d H:i:s");

}

foreach($data as $key=>$val){

$pre = ($i > 0)?', ':'';

$columns .= $pre.$key;

$values .= $pre."'".$this->db->real_escape_string($val)."'";

$i++;

}

$query = "INSERT INTO ".$this->imgTbl." (".$columns.") VALUES (".$values.")";

$insert = $this->db->query($query);

return $insert?$this->db->insert_id:false;

}else{

return false;

}

* Update data into the database

* @param string name of the table

* @param array the data for updating into the table

* @param array where condition on updating data

public function update($data, $conditions){

if(!empty($data) && is_array($data)){

$colvalSet = '';

$whereSql = '';

$i = 0;

if(!array_key_exists('modified',$data)){

$data['modified'] = date("Y-m-d H:i:s");

}

foreach($data as $key=>$val){

$pre = ($i > 0)?', ':'';

$colvalSet .= $pre.$key."='".$this->db->real_escape_string($val)."'";

$i++;

}

if(!empty($conditions)&& is_array($conditions)){

$whereSql .= ' WHERE ';

$i = 0;

foreach($conditions as $key => $value){

$pre = ($i > 0)?' AND ':'';

$whereSql .= $pre.$key." = '".$value."'";

$i++;

}

$query = "UPDATE ".$this->galleryTbl." SET ".$colvalSet.$whereSql;

$update = $this->db->query($query);

return $update?$this->db->affected_rows:false;

}else{

return false;

}

* Delete data from the database

* @param string name of the table

* @param array where condition on deleting data

public function delete($conditions){

$whereSql = '';

if(!empty($conditions)&& is_array($conditions)){

$whereSql .= ' WHERE ';

$i = 0;

foreach($conditions as $key => $value){

$pre = ($i > 0)?' AND ':'';

$whereSql .= $pre.$key." = '".$value."'";

$i++;

}

$query = "DELETE FROM ".$this->galleryTbl.$whereSql;

$delete = $this->db->query($query);

return $delete?true:false;

}

public function deleteImage($conditions){

$whereSql = '';

if(!empty($conditions)&& is_array($conditions)){

$whereSql .= ' WHERE ';

$i = 0;

foreach($conditions as $key => $value){

$pre = ($i > 0)?' AND ':'';

$whereSql .= $pre.$key." = '".$value."'";

$i++;

}

$query = "DELETE FROM ".$this->imgTbl.$whereSql;

$delete = $this->db->query($query);

return $delete?true:false;

}

Bootstrap Library

The Bootstrap 4 library is used to design the table, list, form fields, and links. So, include the CSS file of the Bootstrap library. If you don’t want to use Bootstrap, omit it from include.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

1	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

Gallery List (index.php)

Initially, all the gallery data is retrieved from the database and listed in a tabular view with the view, add, edit, and delete buttons.

The View link allows viewing the images of the gallery.
The Add link allows uploading gallery information with multiple images.
The Edit link allows to edit gallery info and upload/delete images from the gallery.
The Delete link allows deleting gallery and images from the database.
The Status badge (Active/Inactive) allows controlling the visibility of the gallery.

<?php 
// Start session 
session_start(); 
// Include and initialize DB class 
require_once 'DB.class.php'; 
$db = new DB(); 
// Fetch the gallery data 
$images = $db->getRows(); 
// Get session data 
$sessData = !empty($_SESSION['sessData'])?$_SESSION['sessData']:''; 
// Get status message from session 
if(!empty($sessData['status']['msg'])){ 
$statusMsg = $sessData['status']['msg']; 
$statusMsgType = $sessData['status']['type']; 
unset($_SESSION['sessData']['status']); 
} 
?>
<!-- Display status message -->
<?php if(!empty($statusMsg)){ ?>
<div class="col-xs-12">
<div class="alert alert-<?php echo $statusMsgType; ?>"><?php echo $statusMsg; ?></div>
</div>
<?php } ?>
<div class="row">
<div class="col-md-12 head">
<h5>Images</h5>
<!-- Add link -->
<div class="float-right">
<a href="addEdit.php" class="btn btn-success"><i class="plus"></i> New Gallery</a>
</div>
</div>
<!-- List the images -->
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th width="5%">#</th>
<th width="10%"></th>
<th width="40%">Title</th>
<th width="19%">Created</th>
<th width="8%">Status</th>
<th width="18%">Action</th>
</tr>
</thead>
<tbody>
<?php 
if(!empty($images)){ $i=0; 
foreach($images as $row){ $i++; 
$defaultImage = !empty($row['default_image'])?'<img src="uploads/images/'.$row['default_image'].'" alt="" />':''; 
$statusLink = ($row['status'] == 1)?'postAction.php?action_type=block&id='.$row['id']:'postAction.php?action_type=unblock&id='.$row['id']; 
$statusTooltip = ($row['status'] == 1)?'Click to Inactive':'Click to Active'; 
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $defaultImage; ?></td>
<td><?php echo $row['title']; ?></td>
<td><?php echo $row['created']; ?></td>
<td><a href="<?php echo $statusLink; ?>" title="<?php echo $statusTooltip; ?>"><span class="badge <?php echo ($row['status'] == 1)?'badge-success':'badge-danger'; ?>"><?php echo ($row['status'] == 1)?'Active':'Inactive'; ?></span></a></td>
<td>
<a href="view.php?id=<?php echo $row['id']; ?>" class="btn btn-primary">view</a>
<a href="addEdit.php?id=<?php echo $row['id']; ?>" class="btn btn-warning">edit</a>
<a href="postAction.php?action_type=delete&id=<?php echo $row['id']; ?>" class="btn btn-danger" onclick="return confirm('Are you sure to delete data?')?true:false;">delete</a>
</td>
</tr>
<?php } }else{ ?>
<tr><td colspan="6">No gallery found...</td></tr>
<?php } ?>
</tbody>
</table>
</div>

<?php

// Start session

session_start();

// Include and initialize DB class

require_once 'DB.class.php';

$db = new DB();

// Fetch the gallery data

$images = $db->getRows();

// Get session data

$sessData = !empty($_SESSION['sessData'])?$_SESSION['sessData']:'';

// Get status message from session

if(!empty($sessData['status']['msg'])){

$statusMsg = $sessData['status']['msg'];

$statusMsgType = $sessData['status']['type'];

unset($_SESSION['sessData']['status']);

}

<?php if(!empty($statusMsg)){ ?>

</div>

<?php } ?>

<h5>Images</h5>

<a href="addEdit.php" class="btn btn-success"><i class="plus"></i> New Gallery</a>

</div>

<tr>

<th width="40%">Title</th>

<th width="19%">Created</th>

<th width="8%">Status</th>

<th width="18%">Action</th>

</tr>

</thead>

<tbody>

<?php

if(!empty($images)){ $i=0;

foreach($images as $row){ $i++;

$defaultImage = !empty($row['default_image'])?'<img src="uploads/images/'.$row['default_image'].'" alt="" />':'';

$statusLink = ($row['status'] == 1)?'postAction.php?action_type=block&id='.$row['id']:'postAction.php?action_type=unblock&id='.$row['id'];

$statusTooltip = ($row['status'] == 1)?'Click to Inactive':'Click to Active';

<tr>

<td><a href="<?php echo $statusLink; ?>" title="<?php echo $statusTooltip; ?>"><span class="badge <?php echo ($row['status'] == 1)?'badge-success':'badge-danger'; ?>"><?php echo ($row['status'] == 1)?'Active':'Inactive'; ?></span></a></td>

<td>

<a href="view.php?id=<?php echo $row['id']; ?>" class="btn btn-primary">view</a>

<a href="addEdit.php?id=<?php echo $row['id']; ?>" class="btn btn-warning">edit</a>

<a href="postAction.php?action_type=delete&id=<?php echo $row['id']; ?>" class="btn btn-danger" onclick="return confirm('Are you sure to delete data?')?true:false;">delete</a>

</td>

</tr>

<?php } }else{ ?>

<tr><td colspan="6">No gallery found...</td></tr>

<?php } ?>

</tbody>

</table>

</div>

Delete Gallery Images via AJAX

In the view.php and addEdit.php files, the image deletes functionality is integrated. The jQuery is used to delete images from the gallery via Ajax.

Include the jQuery library where the gallery images delete functionality is used.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

The deleteImage() function initiate AJAX request to delete image from gallery.

POST the file ID to the postAction.php file.
The specified image is deleted from the database and the element is removed from the web page.

<script>
function deleteImage(id){
var result = confirm("Are you sure to delete?");
if(result){
$.post( "postAction.php", {action_type:"img_delete",id:id}, function(resp) {
if(resp == 'ok'){
$('#imgb_'+id).remove();
alert('The image has been removed from the gallery');
}else{
alert('Some problem occurred, please try again.');
}
});
}
}
</script>

function deleteImage(id){

var result = confirm("Are you sure to delete?");

if(result){

$.post( "postAction.php", {action_type:"img_delete",id:id}, function(resp) {

if(resp == 'ok'){

$('#imgb_'+id).remove();

alert('The image has been removed from the gallery');

}else{

alert('Some problem occurred, please try again.');

}

});

}

</script>

Display Multiple Images with Gallery Info (view.php)

In the view.php file, the gallery information is displayed.

All the images from the gallery are listed with the Delete link.
Once the Delete button is clicked, deleteImage() function is triggered and the respective image is removed from the gallery through jQuery Ajax using PHP.

<?php 
if(empty($_GET['id'])){ 
header("Location: manage.php"); 
} 
// Include and initialize DB class 
require_once 'DB.class.php'; 
$db = new DB(); 
$conditions['where'] = array( 
'id' => $_GET['id'], 
); 
$conditions['return_type'] = 'single'; 
$galData = $db->getRows($conditions); 
?>
<div class="row">
<div class="col-md-12">
<h5><?php echo !empty($galData['title'])?$galData['title']:''; ?></h5>
<?php if(!empty($galData['images'])){ ?>
<div class="gallery-img">
<?php foreach($galData['images'] as $imgRow){ ?>
<div class="img-box" id="imgb_<?php echo $imgRow['id']; ?>">
<img src="uploads/images/<?php echo $imgRow['file_name']; ?>">
<a href="javascript:void(0);" class="badge badge-danger" onclick="deleteImage('<?php echo $imgRow['id']; ?>')">delete</a>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
<a href="index.php" class="btn btn-primary">Back to List</a>

<?php

if(empty($_GET['id'])){

header("Location: manage.php");

}

// Include and initialize DB class

require_once 'DB.class.php';

$db = new DB();

$conditions['where'] = array(

'id' => $_GET['id'],

);

$conditions['return_type'] = 'single';

$galData = $db->getRows($conditions);

<?php if(!empty($galData['images'])){ ?>

<?php foreach($galData['images'] as $imgRow){ ?>

<a href="javascript:void(0);" class="badge badge-danger" onclick="deleteImage('<?php echo $imgRow['id']; ?>')">delete</a>

</div>

<?php } ?>

</div>

<?php } ?>

</div>

Multiple Image Upload and Data Add/Edit Form (addEdit.php)

The addEdit.php file holds the HTML form that allows the user to select multiple image files and provide the gallery name.

Initially, the form data is submitted to the PHP script (postAction.php) to upload multiple images and insert form data in the database.
If the ID parameter exists on the URL,
- The existing gallery data will be retrieved from the database.
- The data is pre-filled in the input fields and images are listed under the file upload field.
- The data is submitted to the PHP script (postAction.php) to update the existing record in the database and upload new images to the server.

<?php 
// Start session 
session_start(); 
$postData = $galData = array(); 
// Get session data 
$sessData = !empty($_SESSION['sessData'])?$_SESSION['sessData']:''; 
// Get status message from session 
if(!empty($sessData['status']['msg'])){ 
$statusMsg = $sessData['status']['msg']; 
$statusMsgType = $sessData['status']['type']; 
unset($_SESSION['sessData']['status']); 
} 
// Get posted data from session 
if(!empty($sessData['postData'])){ 
$postData = $sessData['postData']; 
unset($_SESSION['sessData']['postData']); 
} 
// Get gallery data 
if(!empty($_GET['id'])){ 
// Include and initialize DB class 
require_once 'DB.class.php'; 
$db = new DB(); 
$conditions['where'] = array( 
'id' => $_GET['id'], 
); 
$conditions['return_type'] = 'single'; 
$galData = $db->getRows($conditions); 
} 
// Pre-filled data 
$galData = !empty($postData)?$postData:$galData; 
// Define action 
$actionLabel = !empty($_GET['id'])?'Edit':'Add'; 
?>
<div class="container">
<h1><?php echo $actionLabel; ?> Gallery</h1>
<hr>
<!-- Display status message -->
<?php if(!empty($statusMsg)){ ?>
<div class="col-xs-12">
<div class="alert alert-<?php echo $statusMsgType; ?>"><?php echo $statusMsg; ?></div>
</div>
<?php } ?>
<div class="row">
<div class="col-md-6">
<form method="post" action="postAction.php" enctype="multipart/form-data">
<div class="form-group">
<label>Images:</label>
<input type="file" name="images[]" class="form-control" multiple>
<?php if(!empty($galData['images'])){ ?>
<div class="gallery-img">
<?php foreach($galData['images'] as $imgRow){ ?>
<div class="img-box" id="imgb_<?php echo $imgRow['id']; ?>">
<img src="uploads/images/<?php echo $imgRow['file_name']; ?>">
<a href="javascript:void(0);" class="badge badge-danger" onclick="deleteImage('<?php echo $imgRow['id']; ?>')">delete</a>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
<div class="form-group">
<label>Title:</label>
<input type="text" name="title" class="form-control" placeholder="Enter title" value="<?php echo !empty($galData['title'])?$galData['title']:''; ?>" >
</div>
<a href="index.php" class="btn btn-secondary">Back</a>
<input type="hidden" name="id" value="<?php echo !empty($galData['id'])?$galData['id']:''; ?>">
<input type="submit" name="imgSubmit" class="btn btn-success" value="SUBMIT">
</form>
</div>
</div>
</div>

<?php

// Start session

session_start();

$postData = $galData = array();

// Get session data

$sessData = !empty($_SESSION['sessData'])?$_SESSION['sessData']:'';

// Get status message from session

if(!empty($sessData['status']['msg'])){

$statusMsg = $sessData['status']['msg'];

$statusMsgType = $sessData['status']['type'];

unset($_SESSION['sessData']['status']);

}

// Get posted data from session

if(!empty($sessData['postData'])){

$postData = $sessData['postData'];

unset($_SESSION['sessData']['postData']);

}

// Get gallery data

if(!empty($_GET['id'])){

// Include and initialize DB class

require_once 'DB.class.php';

$db = new DB();

$conditions['where'] = array(

'id' => $_GET['id'],

);

$conditions['return_type'] = 'single';

$galData = $db->getRows($conditions);

}

// Pre-filled data

$galData = !empty($postData)?$postData:$galData;

// Define action

$actionLabel = !empty($_GET['id'])?'Edit':'Add';

<h1><?php echo $actionLabel; ?> Gallery</h1>

<hr>

<?php if(!empty($statusMsg)){ ?>

</div>

<?php } ?>

<label>Images:</label>

<?php if(!empty($galData['images'])){ ?>

<?php foreach($galData['images'] as $imgRow){ ?>

<a href="javascript:void(0);" class="badge badge-danger" onclick="deleteImage('<?php echo $imgRow['id']; ?>')">delete</a>

</div>

<?php } ?>

</div>

<?php } ?>

</div>

<label>Title:</label>

</div>

</form>

</div>

Upload Multiple Images, Add, Edit, and Delete Records (postAction.php)

This file handles the multiple files upload and add, edit, & delete operations using PHP and MySQL.

1. Add / Edit Form Submit:

The submitted form data is validated to check the empty field value.
The insert() and update() methods of the DB class is used to add/update gallery data in the database.
Check and validate the files extension using pathinfo() function in PHP.
Upload multiple images to server using move_uploaded_file() function in PHP.
Insert the uploaded file names and gallery ID in the database using insertImage() method of the DB class.

2. Inactive Gallery (action_type => block):

Update and set the gallery status to 0 in the database.
The update() method of the DB class is used to update status field value in the database.

3. Activate Gallery (action_type => unblock):

Update and set the gallery status to 1 in the database.
The update() method of the DB class is used to update status field value in the database.

4. Delete Gallery (action_type => delete):

Delete gallery and images data from the database.
Remove images from the directory of the server.
The delete() and deleteImage() methods of the DB class is used to delete gallery and images data from the database.

5. Delete Image (action_type => img_delete):

Delete image data from the database.
Remove image file from the directory of the server.
The deleteImage() method of the DB class is used to delete image data from the database.

After the data manipulation, the status is stored in PHP SESSION and redirect to the respective page.

<?php 
// Start session 
session_start(); 
// Include and initialize DB class 
require_once 'DB.class.php'; 
$db = new DB(); 
// File upload path 
$uploadDir = "uploads/images/"; 
// Allow file formats 
$allowTypes = array('jpg','png','jpeg','gif'); 
// Set default redirect url 
$redirectURL = 'index.php'; 
$statusMsg = $errorMsg = ''; 
$sessData = array(); 
$statusType = 'danger'; 
if(isset($_POST['imgSubmit'])){ 
// Set redirect url 
$redirectURL = 'addEdit.php'; 
// Get submitted data 
$title    = $_POST['title']; 
$id        = $_POST['id']; 
// Submitted user data 
$galData = array( 
'title'  => $title 
); 
// Store submitted data into session 
$sessData['postData'] = $galData; 
$sessData['postData']['id'] = $id; 
// ID query string 
$idStr = !empty($id)?'?id='.$id:''; 
if(empty($title)){ 
$error = '<br/>Enter the gallery title.'; 
} 
if(!empty($error)){ 
$statusMsg = 'Please fill all the mandatory fields.'.$error; 
}else{ 
if(!empty($id)){ 
// Update data 
$condition = array('id' => $id); 
$update = $db->update($galData, $condition); 
$galleryID = $id; 
}else{ 
// Insert data 
$insert = $db->insert($galData); 
$galleryID = $insert; 
} 
$fileImages = array_filter($_FILES['images']['name']); 
if(!empty($galleryID)){ 
if(!empty($fileImages)){ 
foreach($fileImages as $key=>$val){ 
// File upload path 
$fileName = $galleryID.'_'.basename($fileImages[$key]); 
$targetFilePath = $uploadDir . $fileName; 
// Check whether file type is valid 
$fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION); 
if(in_array($fileType, $allowTypes)){ 
// Upload file to server 
if(move_uploaded_file($_FILES["images"]["tmp_name"][$key], $targetFilePath)){ 
// Image db insert 
$imgData = array( 
'gallery_id' => $galleryID, 
'file_name' => $fileName 
); 
$insert = $db->insertImage($imgData); 
}else{ 
$errorUpload .= $fileImages[$key].' | '; 
} 
}else{ 
$errorUploadType .= $fileImages[$key].' | '; 
} 
} 
$errorUpload = !empty($errorUpload)?'Upload Error: '.trim($errorUpload, ' | '):''; 
$errorUploadType = !empty($errorUploadType)?'File Type Error: '.trim($errorUploadType, ' | '):''; 
$errorMsg = !empty($errorUpload)?'<br/>'.$errorUpload.'<br/>'.$errorUploadType:'<br/>'.$errorUploadType; 
} 
$statusType = 'success'; 
$statusMsg = 'Gallery images has been uploaded successfully.'.$errorMsg; 
$sessData['postData'] = ''; 
$redirectURL = 'index.php'; 
}else{ 
$statusMsg = 'Some problem occurred, please try again.'; 
// Set redirect url 
$redirectURL .= $idStr;     
} 
} 
// Status message 
$sessData['status']['type'] = $statusType; 
$sessData['status']['msg']  = $statusMsg; 
}elseif(($_REQUEST['action_type'] == 'block') && !empty($_GET['id'])){ 
// Update data 
$galData = array('status' => 0); 
$condition = array('id' => $_GET['id']); 
$update = $db->update($galData, $condition); 
if($update){ 
$statusType = 'success'; 
$statusMsg  = 'Gallery data has been blocked successfully.'; 
}else{ 
$statusMsg  = 'Some problem occurred, please try again.'; 
} 
// Status message 
$sessData['status']['type'] = $statusType; 
$sessData['status']['msg']  = $statusMsg; 
}elseif(($_REQUEST['action_type'] == 'unblock') && !empty($_GET['id'])){ 
// Update data 
$galData = array('status' => 1); 
$condition = array('id' => $_GET['id']); 
$update = $db->update($galData, $condition); 
if($update){ 
$statusType = 'success'; 
$statusMsg  = 'Gallery data has been activated successfully.'; 
}else{ 
$statusMsg  = 'Some problem occurred, please try again.'; 
} 
// Status message 
$sessData['status']['type'] = $statusType; 
$sessData['status']['msg']  = $statusMsg; 
}elseif(($_REQUEST['action_type'] == 'delete') && !empty($_GET['id'])){ 
// Previous image files 
$conditions['where'] = array( 
'id' => $_GET['id'], 
); 
$conditions['return_type'] = 'single'; 
$prevData = $db->getRows($conditions); 
// Delete gallery data 
$condition = array('id' => $_GET['id']); 
$delete = $db->delete($condition); 
if($delete){ 
// Delete images data 
$condition = array('gallery_id' => $_GET['id']); 
$delete = $db->deleteImage($condition); 
// Remove files from server 
if(!empty($prevData['images'])){ 
foreach($prevData['images'] as $img){ 
@unlink($uploadDir.$img['file_name']); 
} 
} 
$statusType = 'success'; 
$statusMsg  = 'Gallery has been deleted successfully.'; 
}else{ 
$statusMsg  = 'Some problem occurred, please try again.'; 
} 
// Status message 
$sessData['status']['type'] = $statusType; 
$sessData['status']['msg']  = $statusMsg; 
}elseif(($_POST['action_type'] == 'img_delete') && !empty($_POST['id'])){ 
// Previous image data 
$prevData = $db->getImgRow($_POST['id']); 
// Delete gallery data 
$condition = array('id' => $_POST['id']); 
$delete = $db->deleteImage($condition); 
if($delete){ 
@unlink($uploadDir.$prevData['file_name']); 
$status = 'ok'; 
}else{ 
$status  = 'err'; 
} 
echo $status;die; 
} 
// Store status into the session 
$_SESSION['sessData'] = $sessData; 
// Redirect the user 
header("Location: ".$redirectURL); 
exit(); 
?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

<?php

// Start session

session_start();

// Include and initialize DB class

require_once 'DB.class.php';

$db = new DB();

// File upload path

$uploadDir = "uploads/images/";

// Allow file formats

$allowTypes = array('jpg','png','jpeg','gif');

// Set default redirect url

$redirectURL = 'index.php';

$statusMsg = $errorMsg = '';

$sessData = array();

$statusType = 'danger';

if(isset($_POST['imgSubmit'])){

// Set redirect url

$redirectURL = 'addEdit.php';

// Get submitted data

$title = $_POST['title'];

$id = $_POST['id'];

// Submitted user data

$galData = array(

'title' => $title

);

// Store submitted data into session

$sessData['postData'] = $galData;

$sessData['postData']['id'] = $id;

// ID query string

$idStr = !empty($id)?'?id='.$id:'';

if(empty($title)){

$error = '<br/>Enter the gallery title.';

}

if(!empty($error)){

$statusMsg = 'Please fill all the mandatory fields.'.$error;

}else{

if(!empty($id)){

// Update data

$condition = array('id' => $id);

$update = $db->update($galData, $condition);

$galleryID = $id;

}else{

// Insert data

$insert = $db->insert($galData);

$galleryID = $insert;

}

$fileImages = array_filter($_FILES['images']['name']);

if(!empty($galleryID)){

if(!empty($fileImages)){

foreach($fileImages as $key=>$val){

// File upload path

$fileName = $galleryID.'_'.basename($fileImages[$key]);

$targetFilePath = $uploadDir . $fileName;

// Check whether file type is valid

$fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);

if(in_array($fileType, $allowTypes)){

// Upload file to server

if(move_uploaded_file($_FILES["images"]["tmp_name"][$key], $targetFilePath)){

// Image db insert

$imgData = array(

'gallery_id' => $galleryID,

'file_name' => $fileName

);

$insert = $db->insertImage($imgData);

}else{

$errorUpload .= $fileImages[$key].' | ';

}

}else{

$errorUploadType .= $fileImages[$key].' | ';

}

$errorUpload = !empty($errorUpload)?'Upload Error: '.trim($errorUpload, ' | '):'';

$errorUploadType = !empty($errorUploadType)?'File Type Error: '.trim($errorUploadType, ' | '):'';

$errorMsg = !empty($errorUpload)?'<br/>'.$errorUpload.'<br/>'.$errorUploadType:'<br/>'.$errorUploadType;

}

$statusType = 'success';

$statusMsg = 'Gallery images has been uploaded successfully.'.$errorMsg;

$sessData['postData'] = '';

$redirectURL = 'index.php';

}else{

$statusMsg = 'Some problem occurred, please try again.';

// Set redirect url

$redirectURL .= $idStr;

}

// Status message

$sessData['status']['type'] = $statusType;

$sessData['status']['msg'] = $statusMsg;

}elseif(($_REQUEST['action_type'] == 'block') && !empty($_GET['id'])){

// Update data

$galData = array('status' => 0);

$condition = array('id' => $_GET['id']);

$update = $db->update($galData, $condition);

if($update){

$statusType = 'success';

$statusMsg = 'Gallery data has been blocked successfully.';

}else{

$statusMsg = 'Some problem occurred, please try again.';

}

// Status message

$sessData['status']['type'] = $statusType;

$sessData['status']['msg'] = $statusMsg;

}elseif(($_REQUEST['action_type'] == 'unblock') && !empty($_GET['id'])){

// Update data

$galData = array('status' => 1);

$condition = array('id' => $_GET['id']);

$update = $db->update($galData, $condition);

if($update){

$statusType = 'success';

$statusMsg = 'Gallery data has been activated successfully.';

}else{

$statusMsg = 'Some problem occurred, please try again.';

}

// Status message

$sessData['status']['type'] = $statusType;

$sessData['status']['msg'] = $statusMsg;

}elseif(($_REQUEST['action_type'] == 'delete') && !empty($_GET['id'])){

// Previous image files

$conditions['where'] = array(

'id' => $_GET['id'],

);

$conditions['return_type'] = 'single';

$prevData = $db->getRows($conditions);

// Delete gallery data

$condition = array('id' => $_GET['id']);

$delete = $db->delete($condition);

if($delete){

// Delete images data

$condition = array('gallery_id' => $_GET['id']);

$delete = $db->deleteImage($condition);

// Remove files from server

if(!empty($prevData['images'])){

foreach($prevData['images'] as $img){

@unlink($uploadDir.$img['file_name']);

}

$statusType = 'success';

$statusMsg = 'Gallery has been deleted successfully.';

}else{

$statusMsg = 'Some problem occurred, please try again.';

}

// Status message

$sessData['status']['type'] = $statusType;

$sessData['status']['msg'] = $statusMsg;

}elseif(($_POST['action_type'] == 'img_delete') && !empty($_POST['id'])){

// Previous image data

$prevData = $db->getImgRow($_POST['id']);

// Delete gallery data

$condition = array('id' => $_POST['id']);

$delete = $db->deleteImage($condition);

if($delete){

@unlink($uploadDir.$prevData['file_name']);

$status = 'ok';

}else{

$status = 'err';

}

echo $status;die;

}

// Store status into the session

$_SESSION['sessData'] = $sessData;

// Redirect the user

header("Location: ".$redirectURL);

exit();

This multiple images upload management script is very useful for dynamic data management section in the web application. This script can be used for many purposes, like products management with multiple images using PHP and MySQL. You can easily enhance the functionality of this script and use in any data management section where multiple image upload functionality is needed.

1 thought on “How to Upload and display multiple images in PHP”

Hasan

May 24, 2021 at 4:21 pm

Hi

In your document named as
“How to Upload and display multiple images in PHP”, we could’nt understand the file so called “manage.php”, please clear this file where and how cen we create it.

Thanks,
Hasan

How to Upload and display multiple images in PHP

Create Database Table

Database Class (DB.class.php)

Bootstrap Library

Gallery List (index.php)

Delete Gallery Images via AJAX

Display Multiple Images with Gallery Info (view.php)

Multiple Image Upload and Data Add/Edit Form (addEdit.php)

Upload Multiple Images, Add, Edit, and Delete Records (postAction.php)

About the Author: Dharmendra Yadav

1 thought on “How to Upload and display multiple images in PHP”

Leave a Comment Cancel reply

Create Database Table

Database Class (DB.class.php)

Bootstrap Library

Gallery List (index.php)

Delete Gallery Images via AJAX

Display Multiple Images with Gallery Info (view.php)

Multiple Image Upload and Data Add/Edit Form (addEdit.php)

Upload Multiple Images, Add, Edit, and Delete Records (postAction.php)

Related posts:

Recommended Articles...

About the Author: Dharmendra Yadav

1 thought on “How to Upload and display multiple images in PHP”

Leave a Comment Cancel reply