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

admin | Posted on May 14, 2021 |

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>

Leave a Reply Cancel reply