How to upload image without form submit in PHP and Ajax with image preview

Using PHP and Ajax we can do many processing very easily. Without a page refresh, we can execute a PHP program using Ajax. Response from Ajax can be displayed on the screen without reloading the whole page. 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 refresh.

A similar topic is written for multiple images upload. You can read the topic How to upload multiple images with preview using Ajax in PHP and MySQL.

upload photo with preview in PHP and AjaxAssumption

  1. You must have basic knowledge of PHP, HTML, CSS, JavaScript/jQuery.
  2. You must have basic understanding of Ajax. You can read below topics for more details:
    1. How to install xampp for Windows with setup for PHP development
    2. How to write PHP code with examples for beginners
    3. How to build a simple CRUD application in PHP and MySQL

upload image in PHP and Ajax without submitting a formFolders 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' as I am using XAMPP. If you are using WAMP, create 'upload_img' folder under 'www'.

  1. Folder 'cfg' - In this folder we have kept dbconnect.php which is used to connect to the MySQL database.
  2. Folder 'css' - Our custom stylesheet is in this folder
  3. Folder 'js' - In this folder we have 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 in this screen.
  6. upload_image.php is the PHP program called from Ajax. This PHP program does many works like upload, delete, 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 uploaded 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. Note that we have this database connection php program in 'cfg' folder. This is written once and used in every program where database connection is needed. This will be easy for maintenance and also will enable reusability of the code.

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 - in our case it is localhost
  2. userid - we are using root user
  3. password - no password for user root
  4. database name - test database in our case.

We will include this dbconnect.php in other php programs so that we do not need to write it again in the program. For detail database connection understanding please read 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 below 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.

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:

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. 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.

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 Code

I have put all codes in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can directly use the code or you can modify them as per your requirements.

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.

This topic was for a single image upload, a similar topic is written for multiple images upload where you can select multiple images and upload them. Please read the topic How to upload multiple images with preview using Ajax in PHP and MySQL.

Upload Image in PHP with AjaxWatch YouTube Video