Multiple Image Upload Script Using PHP And JavaScript

A PHP script for secure image uploads using PHP and JavaScript. This PHP function image uploads and generates a thumbnail. Including an admin control panel for image management, you can manage image names, delete images, and move or copy images to another location.

Click the button below to see a demo of the uploading page and admin panel page.

Features Of This PHP Image Upload Script

  • Upload multiple images
  • Rename image
  • Copy and move images
  • Delete images
  • Set file limit (1000 images)
  • Set size limit (1GB, 10GB)
  • Set upload image size limit (1MB, 2MB, 10MB)
  • Block unblock uploading
  • Search image type, size, name
  • Restore deleted images
  • Image upload and generate thumbnail
Demo image upload page Demo multiple image upload page Demo images control panel page

Set Admin Page Your Email And Password

Password minimum 8 characters

Prefix Database Tables Name

This image-uploading script library uses three database tables to store data to run. You can rename the database table

Let's see what three database tables are

  • 1 images data (name,URL,size,type)
  • 2 image uploading settings
  • 3 admin user email and password
hcg_images
hcg_image_settings
hcg_image_users

Set image-upload script folder name

View folder and files structure

  • hcg-upload
    • admin
      • action.php
      • images.php
      • index.php
      • login.php
      • logout.php
      • trash.php
      • uploads.php
    • config
      • app.php
      • upload.php
    • css
      • dashboard.css
      • images.css
      • main.css
      • hcg-upload.css
    • include
      • action.php
      • author.php
      • dashboard.php
      • image-data.php
      • trash-data.php
    • install
      • hcg_images.sql
      • index.php
    • js
      • hcg-upload.js
      • trash.js
      • images.js
      • main.js
    • uploads
      • images
        • image-1.png
        • image-2.png
        • image-3.png
      • thumb
        • image-1.png
        • image-2.png
        • image-3.png
      • trash
        • image-1.png
        • image-2.png
        • image-3.png
      • .htaccess
    • index.html
    • upload.php

Note: After downloading and extracting the zip file. Before running the page you need to set up your database connection first. config folder > app.php set database username and password table name

Generate Code And Download

installation requirements

  • PDO PHP Extension
  • GD PHP extension
  • JSON PHP Extension

installation

  • 1 Download Zip file
  • 2 Upload this Zip file to Cpanel file manager public_html folder
  • 3 Extract Zip file
  • 4 Open config folder find app.php and set your database connection and cookies
  • 5 Open link http://www.yoursite.com/hcg-upload/install
  • 6 click install button
  • 7 Enter your email and password Log into the Admin page

Usage Uploading

Single Image Upload Using JQuery

HTML Form

HTML
<form action="./upload.php" method="post" enctype="multipart/form-data" id="img_upload_form">
    <input type="file" name="file_image" id="file_image">
    <button type="submit">upload</button>
</form>

<div id="upload-status"></div>

JQuery Ajax Upload

HTML
$(function() {
    $("#img_upload_form").on("submit", function() {
        event.preventDefault();
        let files = $('#file_image')[0].files[0];
        let form_data = new FormData();
        form_data.append('file_image', files);
        if (files == undefined) {
            alert('Plese select a image');
            return false;
        }
        $("#upload-status").html("loading...");
        $.ajax({
            url: './upload.php',
            type: "POST",
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            success: function(data) {
                if (data.status == 'success') {
                    console.log(data.image_data);
                    /* preview success upload
                        {
                            status: "success",
                            image_data: {
                                name: "35888G9722W5UNB.jpg",
                                type: "jpg",
                                size: 22545,
                                size_format: "22.02 KB",
                                width: 480,
                                height: 549,
                                thumb: "/uploads/thumb/2020/08/26/35888G9722W5UNB.png",
                                url: "/uploads/images/2020/08/26/21/35888G9722W5UNB.jpg"
                            }
                        };
                    */
                } else {
                    console.log(data);
                    /* preview error upload
                        {
                         status: "error",
                         msg: "error something",
                         error_type: ""
                        }
                    */
                    $("#upload-status").html(data.msg);
                }
                $('#file_image').val('');
            },
            error: function(xhr) {
                $("#upload-status").html("error " + xhr.status + " " + xhr.statusText);
            }
        });
    });
});

Using JQuery Multiple Images Upload

Links
<link rel="stylesheet" href="./css/hcg-image-upload.css">
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/hcg-image-upload.js"></script>
HTML
<form action="./upload.php" method="post" enctype="multipart/form-data" id="multiple-upload">
    <input type="file" name="file_image" id="file_image">
    <button type="submit">upload</button>
</form>

<div id="preview-images-box"></div>
JQuery
$(function() {
    $("#multiple-upload").hcgImageUploads({
        multiple: true,
        previewImages: true,
        maxUpload: 100,
        url: 'upload.php',
        complete: function(success_imgs, error_imgs) {
          console.log('success '+success_imgs.length);
          console.log('error ' + error_imgs.length);
        },
        success: function(img_oject) {
            console.log(img_oject.url);
        },
        error: function(error_img_object) {
            console.log(error_img_object.name);
        }
    });
});

Options

Name value Description
multiple true or false bool Allow multiple images upload
previewImages true or false bool Preview all images before uploading
maxUpload 5, 10 number Set how many images to select

Callbacks

Name Description
success It will be called after each image is uploaded. Returns 1 argument object
error It will be called after each image uploading error. Returns 1 argument object
complete It will be called once all images are uploaded. Returns 2 arguments array of object. success list, error list

Upload page

PHP
<?php

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

  require './config/app.php';
  require './config/upload.php';

  $options = array(
    'upload_path' => './uploads/images/', // set upload folder
    'thumb_path' => './uploads/thumb/', // set thumbnail folder
    'extension' => array('jpeg', 'jpg', 'png', 'gif', 'webp'), //allowed extension
    'mime_type' => array('image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'), //allowed mime types
  );
  $upload = new hcgImageUploads($options);
  $upload->do_upload('file_image'); //input file name

  // here you can hide some result
  // $hide_result = array('thumb','width',height);

  $hide_result = array('thumb');
  $result = $upload->get_result($hide_result);
  echo json_encode($result);
}

  /*
      if success upload return data

      {
      "status": "success",
      "image_data": {
           "name": "35888G9722W5UNB.jpg",
           "type": "jpg",
           "size": 22545,
           "size_format": "22.02 KB",
           "width": 480,
           "height": 549,
           "thumb": "/uploads/thumb/2020/08/26/35888G9722W5UNB.png",
           "url": /uploads/images/2020/08/26/21/35888G9722W5UNB.jpg"
          }
      }

      if error

      {
       "status": "error",
       "msg": "error msg",
       "error_type": ""
      }
  */


?>
Report Problem