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');
                                }
                            },
                        });
                    });
            });

The post jQuery ajax image upload in PHP with preview appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

In this tutorial, you will see how you can apply Smooth scrolling effect and allow users to click on back to top button to instantly go on top of the website page. You can also implement this scroll function to a particular section on the website.

The following is an HTML code in which we have an anchor tag, which defines the section where we will go after clicking on the scroll button.

<body>
<a name="top" class="top"></a> 
<!--- your page content goes here -->
<!-- back to top button -->
<a id="goTop" class="btn btn-primary">Back to top</a>
</body>

Add Ajax library in scroll back to top

Add the following library in code, which will execute the jQuery functions.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQuery code for Back to Top Smooth scroll

With jQuery animate() method, we can easily scroll user back to the top of the page.

<script type='text/javascript'>
$('#goTop').on('click', function(e){
    $("html, body").animate({scrollTop: $(".top").offset().top}, 500);
});
</script>

This is a very simple code to perform jQuery bottom to Top Smooth scroll. This can also be used to scroll to a particular div section, you just need to pass the className in animate function.

For example, you can use any other className than top and just place that className somewhere in your same website page.

The post jQuery Back to Top Smooth scroll appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.