How to upload image without refresh page using Ajax and PHP

Are you looking for ajax file/image upload without refreshing page using ajax, Jquery and php. I had implemented this ajax form submitting using jquery.form plugin. You may also like How to Load Data From Database Without Page Refresh using Ajax, jQuery and PHP and How to Submit the Form Without Page Refresh using Ajax, jQuery and PHP.

HTML Code

<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>

jQuery Code

<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>

PHP 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();
    }
?>

Leave a Reply

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