How to upload image without page reload in PHP and Ajax with image preview

In this topic, we will develop an application in which user can upload an image, preview it before upload and also delete an image after upload. All these functions will be done using PHP, Ajax and MySQL, without a page reload.

upload image in PHP and Ajax without page reloadFolders and Files

Below is a screenshot of the folder structure and files I am using:

How to upload images in database with PHP and ajax

I have created a folder named 'upload_img' under 'xampp/htdocs'.

  1. Folder 'cfg' is used to keep dbconnect.php to connect to the MySQL database.
  2. Folder 'css' is for custom stylesheet.
  3. Folder 'js' is for our custom JavaScripts file
  4. Folder 'uploads' - All uploaded images will be stored in this folder
  5. index.php is the page to upload the images. User can upload, view and delete images using this page.
  6. upload_image.php is the PHP program called from Ajax. This PHP program is used to upload, delete and display images.

Below is the screenshot of the page:

PHP Ajax Image Upload with Preview

Upload Image in PHP with AjaxWatch YouTube Video

Step 1 - Create a MySQL table to store images

Let us create a table named 'images' in MySQL database. We will be using "test" database. Table structure and create table scripts are given below:

Table: images

This table stores file names of all uploaded images along with upload date.

image preview in jquery javascript

Table has 3 columns.

  1. id - Unique id of each image, it is the primary key and auto incremented
  2. image_file - File name of uploaded image
  3. upload_dt - Date on which image was uploaded
Create table script for this table is given below, you can use this code to create the table. Also, if you download code (see in download section later in this topic) you will get all the scripts.

images.sql


CREATE TABLE `images` (
  `id` int(11) NOT NULL,
  `image_file` varchar(255) NOT NULL,
  `upload_dt` datetime NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `images`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `images`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

After you create the table, please verify if structure is same as above.

Step 2 - Connect to MySQL database (dbconnect.php)

Use below script to connect to the database. We will include this script in othe PHP programs to connect to database.

dbconnect.php


  $server="localhost";
  $userid="root";
  $pwd="";
  $dbname="test";
  $conn = new mysqli($server, $userid, $pwd, $dbname);
  //Check connection
  if ($conn->connect_error) 
  	die("Connection Error: " . $conn->connect_error);
  1. server is localhost
  2. userid is the root user
  3. password - no password for root user
  4. database name - test database in our case.

You can also read the topic How to connect to MySQL database in PHP using MySQLi and PDO.

Step 3 - Develop a screen to upload and view images (index.php)

Our upload page will look like below. As soon as one image is uploaded, it will be displayed under "Uploaded Images" section. User can delete an uploaded image by clicking on 'x' button on top right corner of an image. Also, user can click on an image and view it in a modal .

upload image without using form submit in php with ajax

User can click on the "Select an Image" button and select an image. As soon as image is selected, preview of the image will be displayed.

A JavaScript function previewImg() is called on onChange event of the image field to preview image before upload.

Below is the code for index.php. Note that the modal is also innluded in it.


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Upload Image in PHP using Ajax</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
        <script src="js/upload.js"></script>
    </head>
    <body>
        <?php
        include "cfg/dbconnect.php";
        ?>
        <div class="container">
            <h1>Upload Image in PHP using Ajax</h1>
            <form id ="uploadFrm" action="" method="post">
                <div class="mb-3">
                    <label for="image" class="form-label">Select an Image</label>
                    <input type="file" class="form-control" name="image" id="image" aria-describedby="fileHelpId" onchange="previewImg(this)" />
                    <div id="fileHelpId" class="form-text">Allowed file types: jpg,jpeg,png,gif. Max size 4M.</div>
                </div>
               
                <div class ="imgPreview">
                    <!-- Image Preview -->
                </div>
               <button type="submit" class="btn btn-primary">Upload</button>

            </form>
            <div class="text-danger" id="errMsg"></div>
            <div class="text-success" id="succMsg"></div>
            <h2>Uploaded Images</h2>
            <div class="image-list">
                <?php include "image_list.php";?>
            </div>
        </div>

<!-- Modal to display image -->

<div class="modal fade" id="modalId" tabindex="-1" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Display the image here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

We are displaying uploaded images by selecting from the images table. We have included image_list.php in line 36 above and it is given below:


<?php
$sql = "select * from images order by id desc";
$stmt = $conn->prepare($sql);
$stmt->execute();
$result = $stmt->get_result();
?>
<div class="show-image">
    <?php
    if ($result->num_rows > 0){
        foreach($result as $row){ ?>
            <a class="view" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#modalId" data-id="<?= $row['image_file']?>" > <img src="<?php echo "uploads/".$row['image_file']?>"></a>

            <button class="btn btn-danger" title="Delete this image" onclick="deleteImg('<?=$row['id']?>','<?=$row['image_file'] ?>')">×</button>
    <?php
        }
    }
    else {?>
        <p>No Images to display</p>
    <?php } ?>
</div>

On clicking delete button, deleteImg() JavaScript function is called to delete the image.

Step 4 - Write JavaScript/jQuery to preview, upload and delete an image (upload.js)

Let us now see the JavaScript functions in upload.js file.

Preview Image - Function previewImg()

This function is called as soon as user selects an image. This function displays the preview of the image. 


function previewImg(input) {
  if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
          $(".imgPreview").css('background-image', 'url(' + e.target.result + ')');
      }
      reader.readAsDataURL(input.files[0]); 
  }
}

If the file is selected, we are creating a FileReader object and using it's onload event to set the backgroud with the created image URL.

Function to upload image

We will write Ajax script after submitting the form. We will run a php program (upload_image.php) with the input file as parameter, this php program uploads the image. Let's see the Ajax code:


$(document).on("submit", "#uploadFrm", function(e){
  e.preventDefault();
  $("#errMsg").html('');
  $("#succMsg").html('');
  if ($("#image").val() !='') {
      var formData = new FormData(this);

      $.ajax({
          type:"POST",
          url:"upload_image.php",
          data:formData,
          contentType: false,
          processData: false,
          success: function(response){
              if (response.indexOf("Error") >= 0)
                  $("#errMsg").html(response);
              else{
                  $(".image-list").html(response);
                  $("#image").val('');
                  $(".imgPreview").css('background-image','');
                  $("#succMsg").html('Image uploaded successfully');
              }
          }
      });
    }
    else
      $("#errMsg").html("Please select an image file");
} );

We are creating an instance of FormData() and sending it with the Ajax request. We have to use contentType as false as there is a file in the form and also processData should be false as we are sending a form.

upload_image.php returns a message with "Error" in the message. So we are checking this in success function. In case, there is no error, we are refreshing the list of uploaded images using $(".image-list").html(response);

Let us see the code for upload_image.php.

upload_image.php is used to upload, delete and display images. Let us see upload section of upload_image.php. 


include "cfg/dbconnect.php";
$target_dir = "uploads/";
$valid_ext = array('jpg','jpeg','png','gif');
if (isset($_FILES['image']) && $_FILES['image']['name'] != ''){
    $image_file = $_FILES['image']['name'];
    $image_tmp = $_FILES['image']['tmp_name'];
    $image_size = $_FILES['image']['size'];
    
    $ext = strtolower(pathinfo($image_file,PATHINFO_EXTENSION));
    if (in_array($ext, $valid_ext)){  // valid extension
        if (exif_imagetype($image_tmp) == IMAGETYPE_JPEG || exif_imagetype($image_tmp) == IMAGETYPE_GIF || exif_imagetype($image_tmp) == IMAGETYPE_PNG) {  // it is an image file
            if ($_FILES['image']['size'] <= 4000000)  { // size max 4M 
                $file_name = time()."-".basename($image_file);
                try{
                    move_uploaded_file($image_tmp, $target_dir.$file_name);
                    try{
                        $sql = "insert into images (image_file) values( ? )";
                        $stmt = $conn->prepare($sql);
                        $stmt->bind_param("s", $file_name);
                        $stmt->execute();
                        include "image_list.php";
                    }
                    catch(Exception $e){
                        if (file_exists($target_dir.$file_name))
                            unlink($target_dir.$file_name);
                        echo ("Error ".$e->getMessage());
                    }

                }
                catch(Exception $e){
                    echo ("Error ".$e->getMessage());
                }    
            }
            else{
                echo "Error: Image size exceeds 4M";
            }
        }
        else{
            echo "Error: Not a valid image file";
        }
    }
    else{
        echo "Error: Not an acceptable file extension";
    }
}

We are using three validations for the image - image file extension, image size and and if the file is really an image file or not. If all validations are successful, image is uploaded and it is added in the database. If database insert fails, we have to remove the uploaded file. That is why we used unlink() function to remove the image file.

Note that we using the target directory as "uploads". When upload and database insert are successful, we are refreshing the uploaded images in line 21.

Function deleteImg()

This function is called when user clicks on delete (x - button) button from top right corner of an image. The function executes Ajax scripts to run upload_image.php which deletes the image from database as well as from the server folder ('uploads' in our case). Below is the code written in upload.js for this function.


function deleteImg(id,image_file){
  $("#errMsg").html('');
  $("#succMsg").html('');
  if (confirm("Are you sure you want to delete the image?")){
      $.ajax({
          type:"POST",
          url:"upload_image.php",
          data:{id:id,image_file:image_file, delete:true},
          success:function(response){
              $(".image-list").html(response);
              $("#succMsg").html('Image deleted successfully');
          }
      });
  }
}

We are using the same php program in Ajax. Note that there is a delete flag in the data parameter.

Let's see the code for delete image section of upload_image.php.


// delete image from database and from the server
if (isset($_POST['delete'])){
    $id = $_POST['id'];
    $image_file = $_POST['image_file'];

    $sql = "delete from images where id = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param('i',$id);
    $stmt->execute();
    if (file_exists($target_dir.$image_file))
        unlink($target_dir.$image_file);
    include "image_list.php";
  }

We are deleting the image from the database and also deleting it from the 'uploads' folder. Then we are refreshing the uploaded images.

The last thing we will do is to display the image in a Bootstrap modal when user clicks on an image.


// To display image in modal
  $(document).on("click", ".view", function(){
      var image = $(this).data('id');
      var str = '<img src="uploads/'+image+'">';
      $(".modal-body").html(str);
  });

Step 5 - Add CSS (style.css)

We need to add some styles. Very simple and basic styles are used here. You can always add better styles. I have already added style.css in index.php. See below:

style.css


h1,h2{
    text-align: center;
    margin-bottom: 30px;
}
body{
    width: 60%;
    margin: auto;
}
.imgPreview{
    background-image: url('../img/avatar.png');
    width: 16%;
    height: 145px;
    border-radius: 5%;
    background-size: cover;
    background-position: center;
    margin-bottom: 30px;
}
.show-image img{
    width:20%;
    height:30%;
}
.show-image .btn{
    position: relative;
    top: -36px;
    left: -45px;
}
.modal-content{
    width:700px;
}
.modal-body img{
width: 100%;
}

upload and display image in phpTest the Application

Make sure in your XAMPP control panel Apache and MySQL services are running. Open the browser and run localhost/upload_img. You will see the home page as displayed below:

Upload and Preview Image

Upload an image and you should see the uploaded image displayed. Click on the image, it should open in a modal. Upload another image and try to delete one of the image.

Upload and Preview Image

Test all error cases also, like select invalid file type, select an image with size more than 4M. See if you get the proper error messages.

Our development and testing are completed now. Hope you could understand all the steps and you could test it successfully.

Upload Images With Preview Using ajax and jqueryImportant Note

For uploading images, you must verify below parameters in php.ini file. Below are the values set for these parameters in my php.ini


  ; Whether to allow HTTP file uploads.
  ; http://php.net/file-uploads
  file_uploads=On
  
  ; Maximum allowed size for uploaded files.
  ; http://php.net/upload-max-filesize
  upload_max_filesize=40M
  
  ; Maximum number of files that can be uploaded via a single request
  max_file_uploads=20

image upload with preview and delete javascriptDownload Source Code

Click on the download button to download the source code.

image upload jquery ajax php mysqlConclusion

In this example I have showed you how you can preview, upload and delete an image using Ajax without submitting a form. If you find it useful, you can use it in your project or in any other web application with similar requirement.

Upload Image in PHP with AjaxWatch YouTube Video

Related Topics

Popular Topics