How To Upload & Display Image Using JQuery AJAX PHP And MySQL

Hello Friends, In this article we will learn how to upload & display image using jQuery AJAX in PHP MySQL.

loading images using the AJAX function is easy and simple to implement on your web page.

I use jQuery AJAX to implement image uploads. There is a form with fields for file input and buttons to upload. When a form with the selected image file is sent, the AJAX script is run. In this code, a PHP upload request is sent with the uploaded image. The PHP code moves the uploaded image to the uploads folder and returns the HTML image to display the preview in AJAX response.

Table of Contents

Create HTML Image Upload Form

index.php

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Upload & Display Image Using jQuery AJAX PHP and MySQL</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
  <body style="margin-top:50px;background:#f2f2f2">
    <div class="container">
      <h2 style="text-align:center;">How to Upload & Display Image Using jQuery AJAX PHP and MySQL</h2>
        <div class="row">
         <div class="col-md-4"></div>  
          <div class="col-md-4" style="margin-top:20px;margin-bottom:20px;">

          <div class="alert alert-success alert-dismissible success" style="display: none;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <span class="success-message">File uploaded successfully</span>  
          </div>
          <div class="alert alert-danger alert-dismissible danger" style="display: none;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <span class="danger-message">This type of image is not allow</span>  
          </div>

          <form id="submitForm">
            <div class="form-group">
              <label for="file">Select File</label>
              <input type="file" class="form-control" name="file" id="image" required="">
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-success btn btn-block">Upload</button>
            </div>  
          </form>
        </div>
      </div>
      <div class="row">
      <div class="col-md-4"></div>  
        <div class="card col-md-4" id="preview" style="display: none;">
          <div class="card-body" id="imageView">
                   
          </div>
        </div>    
      </div>
    </div>
  </body>
</html>

Upload Image to use jQuery AJAX

This code shows the ajax () function used to send file upload requests by publishing the FormData instance. In PHP the file is uploaded in the specified path. After successfully uploading the image, the image HTML code will be printed as an answer as AJAX. This is then added to the target target to show the preview user.

jQuery AJAX Script to use after </html> in index.php

<!---jQuery ajax file upload --->
<script type="text/javascript">
  $(document).ready(function(){
      $("#submitForm").on("submit", function(e){
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
          url  : "upload.php",
          type : "POST",
          cache:false,
          data :formData,
          contentType : false, // you can also use multipart/form-data replace of false
          processData: false,
          success:function(response){
            $("#preview").show();
            $("#imageView").html(response);
            $("#image").val('');
          }
        });
      });
  });
</script>

Create PHP file to upload and show Image

upload.php

<?php
	// upload file using move_uploaded_file function in php	
	if (!empty($_FILES['file']['name'])) {

		$fileName = $_FILES['file']['name'];
		
		$fileExt = explode('.', $fileName);
		$fileActExt = strtolower(end($fileExt));
		$allowImg = array('png','jpeg','jpg');
		$fileNew = rand() . "." . $fileActExt;  // rand function create the rand number 
		$filePath = 'uploads/'.$fileNew; 

		if (in_array($fileActExt, $allowImg)) {
		    if ($_FILES['file']['size'] > 0  && $_FILES['file']['error']==0) {  
			if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) {
		    	    echo '<img src="'.$filePath.'" style="width:320px;height:300px;"/>';
			}else{
			    echo "File is not uploaded try again";
			}	
		    }else{
		    	echo "Unable to upload physical file";
		    }
		}else{	
		    echo "This type of image is not allow";
		}
	}
?>

Output

How to Upload & Display Image Using jQuery AJAX PHP and MySQL

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊