How to display image in PHP using Ajax?

Display image in PHP using Ajax

In this blog you will learn that how you can take image from input field and send it in PHP by Ajax and display back in the webpage . 

 

Step -1 This is the HTML CODE

<form class="header-showcase-form" >

	<h6>Select an image </h6>
	<input type="file" name="file_data" id="header-image">
 	<input type="submit" value="send">
</form> 

 

Step -2 This is the JavaScript code (Ajax)

 

    var form = document.querySelector(".header-showcase-form");
    form.addEventListener('submit',function(e){
        e.preventDefault();


                $.ajax({
                      type: 'POST',
                      url: 'result.php',
                      data : new FormData(this),
                      contentType:false,
                      processData:false,
                      success:function(response){
                           document.write(response);
                     }
                })
    });

Step -3 This is the PHP Code

 

$file =  $_FILES['file_data'];
$location  = $file['tmp_name'];
$files_binary = base64_encode(file_get_contents($location));

$complete_src = "data:image/png;base64,".$files_binary;
echo "<img src=".$complete_src.">";