simple-image-gallery/ │ ├── index.html ├── db/ │ └── database.sql ├── src/ │ ├── fetch-image.php │ └── upload.php ├── include/ │ ├── config.sample.php │ └── db.php ├── assets/ │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── script.js │ └── uploads/ │ │ └── (uploaded images will be stored here) ├── README.md └── .gitignore

CREATE TABLE IF NOT EXISTS `images` ( `id` int(11) NOT NULL AUTO_INCREMENT, `file_name` varchar(255) NOT NULL, `uploaded_on` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, ]; // Create a new PDO instance try { $pdo = new PDO($dsn, DB_USER, DB_PASS, $options); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Set error mode to exception } catch (PDOException $e) { echo 'Connection failed: ' . $e->getMessage(); // Display error message if connection fails } ?>

        
  
 
Image Gallery
 
 
 
 
 Choose Image  
 Upload 
 
 
 
 
 
  
 
     

$(document).ready(function(){ // load gallery on page load loadGallery(); // Form submission for image upload $('#uploadImage').on('submit', function(e){ e.preventDefault(); // Prevent default form submission var file_data = $('#image').prop('files')[0]; var form_data = new FormData(); form_data.append('file', file_data); //hide upload section $('#uploadImage').hide(); $.ajax({ url: 'src/upload.php', // PHP script to process upload type: 'POST', dataType: 'text', // what to expect back from the server cache: false, data: new FormData(this), // Form data for upload processData: false, contentType: false, success: function(response){ let jsonData = JSON.parse(response); if(jsonData.status == 1){ $('#image').val(''); // Clear the file input loadGallery(); // Fetch and display updated images $('#upload-status').html('
'+jsonData.message+'
'); } else { $('#upload-status').html('
'+jsonData.message+'
'); // Display error message } // hide message box autoHide('#upload-status'); //show upload section autoShow('#uploadImage'); } }); }); }); // Function to load the gallery from server function loadGallery() { $.ajax({ url: 'src/fetch-images.php', // PHP script to fetch images type: 'GET', success: function(response){ let jsonData = JSON.parse(response); $('#gallery').html(''); // Clear previous images if(jsonData.status == 1){ $.each(jsonData.data, function(index, image){ $('#gallery').append('
'); // Display each image }); } else { $('#gallery').html('
No images found...
'); // No images found message } } }); } //Auto Hide Div function autoHide(idORClass) { setTimeout(function () { $(idORClass).fadeOut('fast'); }, 1000); } //Auto Show Element function autoShow(idORClass) { setTimeout(function () { $(idORClass).fadeIn('fast'); }, 1000); }

 0, 'message' => 'No images found.'); // Fetching images from the database $query = $pdo->prepare("SELECT * FROM images ORDER BY uploaded_on DESC"); $query->execute(); $images = $query->fetchAll(PDO::FETCH_ASSOC); if(count($images) > 0){ $response['status'] = 1; $response['data'] = $images; // Returning images data } // Return response echo json_encode($response); ?> ?>

 0, 'message' => 'Form submission failed, please try again.'); if(isset($_FILES['image']['name'])){ // Directory where files will be uploaded $targetDir = UPLOAD_DIRECTORY; $fileName = date('Ymd').'-'.str_replace(' ', '-', basename($_FILES['image']['name'])); $targetFilePath = $targetDir . $fileName; $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION); // Allowed file types $allowTypes = array('jpg','png','jpeg','gif'); if(in_array($fileType, $allowTypes)){ // Upload file to server if(move_uploaded_file($_FILES['image']['tmp_name'], $targetFilePath)){ // Insert file name into database $insert = $pdo->prepare("INSERT INTO images (file_name, uploaded_on) VALUES (:file_name, NOW())"); $insert->bindParam(':file_name', $fileName); $insert->execute(); if($insert){ $response['status'] = 1; $response['message'] = 'Image uploaded successfully!'; }else{ $response['message'] = 'Image upload failed, please try again.'; } }else{ $response['message'] = 'Sorry, there was an error uploading your file.'; } }else{ $response['message'] = 'Sorry, only JPG, JPEG, PNG, & GIF files are allowed to upload.'; } } // Return response echo json_encode($response); ?>

body { background-color: #f8f9fa; } #gallery .col-md-4 { margin-bottom: 20px; } #gallery img { display: block; width: 200px; height: auto; margin: 10px; }