IDIOT DEVELOPER

Upload Image using Ajax & JQuery in PHP with Image Preview
Upload Image using Ajax & JQuery in PHP with Image Preview
DOWNLOAD

Image upload is one of the basic thing that every we developer must know. If you new to web development in PHP and dont know nothing about it, then see my previous post on Basic File Upload in PHP. In this tutorial we are going to learn about Image Upload with AJAX(without reloading page) and JQuery in PHP.

 

We have simple HTML form which have an input tag to select file, and a submit button. First we select the image file, then press submit button. On pressing the submit button the ajax script will be executed and the control will be transfered to the PHP file. The PHP file will uploads the image into the target folder and returns the image HTML to show the preview as an AJAX response.

 

NOTE: There is no checking system for the extension and size of the image, so upload only an image file.

 

HTML Code

The HTML Code will design the image file upload form and the image preview system.

 


<div class="upload-form-wrapper">
  <h2>Upload image using ajax with preview in php</h2>
  <div class="photo-preview"></div>
  <div class="photo-action"></div>
  <form id="ajax-form" method="post" action="upload.php" enctype="multipart/form-data">
    <label for="photo">Select Image:</label>
    <input type="file" name="photo" id="photo">
    <button type="submit" class="upload-btn">Upload</button>
  </form>
</div>

 

CSS Code

The CSS will give it some styling so that it looks nice.

 


.upload-form-wrapper{
  background: #fff;
  width: 500px;
  padding:10px;
  box-shadow: 1px 5px 10px #ccc;
  border-radius: 3px;
  margin: auto;
  font-family:sans-serif;
}
.photo-preview{
  background: #ccc;
  min-height: 200px;
  width: 500px;
}
.photo-action{
  padding:10px;
  text-align: center;
}
.photo-action img{
  height: 50px;
  width:50px;
}
input[type="file"]{
  border: 1px solid #ccc;
}
.upload-btn{
  background: #333;
  padding: 5px 25px;
  color: #fff;
  border: 1px solid #333;
  cursor: pointer;
}

 

AJAX Code

First we need to include the JQuery library in the file.

 

The JQuery AJAX code will send the file upload request by posting the FormData instance to the PHP file. On successful upload of the file the image preview will be seen.

 


$(document).ready(function(){
  $("#ajax-form").submit(function(e){
    e.preventDefault();

    $.ajax({
      url: "upload.php",
      type: "POST",
      data: new FormData(this),
      contentType: false,
      processData: false,
      beforeSend: function(){
        $(".photo-action").html('<img src="upload.gif"/>');
      },
      success: function(data){
        $(".photo-action").html("");
        $(".photo-preview").html(data);
      },
      error: function(xhr){
        $(".photo-action").html('xhr.statusText + xhr.responseText');
      }

    });
  });
});

 

PHP Code

This PHP code will handle the uploading of the image file. You can make certain validation here like checking the type or extension of the file, limiting the file upload size, etc. I have just written a simple PHP upload script. It will just upload the image file into the target folder, and the echo the image file, which the ajax will receive as response and the display on the browser.

 


<?php

if(isset($_FILES['photo'])){
  $file_name = $_FILES['photo']['name'];
  $file_tmp = $_FILES['photo']['tmp_name'];
  move_uploaded_file($file_tmp, "uploads/".$file_name );
  echo '<img src="uploads/'.$file_name.'" style="width: 500px;">';
}else{
  echo 'Error';
}

?>

You can download the complete code from my github account.

Leave a Reply

Your email address will not be published. Required fields are marked *