jQuery ajax image upload in PHP with preview

In PHP it is very easy to upload files on the server with the help of the move_uploaded_file() method. But in that, you have to load the page again and again if you need to upload more images. Nowadays we know that speed plays a very important role in a web application, user skips and gets irritates if the page reloads every time when we do some activity on the website.

AJAX is popular because we don’t need to reload the page in getting done something. We are now going to discuss how we can upload an image using ajax and PHP with preview.

When we use AJAX in the right way, it will improve the user experience. In this post, we will let you know how you can upload image using AJAX and can show preview of image without the page refresh.

Image Upload HTML

This is the HTML code to upload the file and display the uploaded image preview. When users click on the Upload button, ajax will upload the file to the folder and fetch it to display on id=”img”.

  <div class="container">
            <form method="post" action="" enctype="multipart/form-data" id="myform">
                <div class='preview'>
                    <img src="" id="img" width="100" height="100">
                </div>
                <div >
                    <input type="file" id="file" name="file" />
                    <input type="button" class="button" value="Upload" id="file_upload">
                </div>
            </form>
        </div>

CSS

CSS code to design the above HTML form. We just added this CSS to improve the form view. Its just optional you can skip this part.

.container{
   margin: 0 auto;
   border: 0px solid black;
   width: 50%;
   height: 250px;
   border-radius: 3px;
   background-color: ghostwhite;
   text-align: center;
}
/* Preview */
.preview{
   width: 100px;
   height: 100px;
   border: 1px solid black;
   margin: 0 auto;
   background: white;
}

.preview img{
   display: none;
}
/* Button */
.button{
   border: 0px;
   background-color: deepskyblue;
   color: white;
   padding: 5px 15px;
   margin-left: 10px;
}

PHP file to upload the image

PHP file upload script. You can check the image type before uploading them on the server. if the image gets uploaded, it shows the path of the image otherwise if there is any problem in image upload it will show you 0.

<?php

/* Getting file name */
$filename = $_FILES['file']['name'];

/* Location */
$location = "fileUpload/".$filename;
$uploadOk = 1;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);

/* Valid Extensions */
$valid_extensions = array("jpg","jpeg","png");
/* Check file extension */
if( !in_array(strtolower($imageFileType),$valid_extensions) ) {
   $uploadOk = 0;
}

if($uploadOk == 0){
   echo 0;
}else{
   /* Upload file */
   if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
      echo $location;
   }else{
      echo 0;
   }
}

Uploading Image and Showing Preview using jQuery AJAX

This script contains a jQuery which sends the file to the fileUpload.php. if it gets response 0 from PHP file it means the file did not get upload, on other than 0 status means the file has been uploaded and then it shows the uploaded image in .preview img class.

  	 $(document).ready(function(){
                    $("#file_upload").click(function(){
                        var fd = new FormData();
                        var files = $('#file')[0].files[0];
                        fd.append('file',files);
                        $.ajax({
                            url: 'fileUpload.php',
                            type: 'post',
                            data: fd,
                            contentType: false,
                            processData: false,
                            success: function(response){
                                if(response != 0){
                                    $("#img").attr("src",response); 
                                    $(".preview img").show(); // Display image 
                                }else{
                                    alert('file not uploaded');
                                }
                            },
                        });
                    });
            });