How to Upload Image Without Page Refresh using Ajax,jQuery and PHP

0

In this tutorial I will show you how to upload image without page refresh using ajax jQuery and PHP. For this we will use jQuery form plugin. Ajax and Jqery have made life easier for us all. You may also like Multiple file upload in Codeigniter

PHP, jQuery, Ajax and HTML Code

<?php
if(isset($_POST['submit_image']))
{
    $uploadfile=$_FILES["upload_file"]["tmp_name"];
    $folder="images/";
    move_uploaded_file($_FILES["upload_file"]["tmp_name"], "$folder".$_FILES["upload_file"]["name"]);
    exit();
}
?>

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script> 
<script>
$(document).ready(function() { 
    $('form').ajaxForm(function() { 
    }); 
});
</script>
</head>
    <body>
        <form action="" method="post" enctype="multipart/form-data">
            <input type="file" id="upload_file" name="upload_file" />
            <input type="submit" name='submit_image' value="Upload Image"/>
        </form>
    </body>
</html>