Thursday, October 19, 2017
Home » Ajax » PHP AJAX Image Upload

PHP AJAX Image Upload

In this tutorial let us learn about how to upload an image file using PHP and AJAX.

In this example we are sending form data to PHP script via jQuery ajax(). In PHP script it moves uploaded image to the target folder and returns success message as AJAX response.

PHP Example to Upload Image

HTML code for the form containing file input is,

<form id="uploadForm" action="upload.php" method="post">
<label>Upload Image File:</label><br/>
<input name="userImage" type="file" class="inputFile" />
<input type="submit" value="Submit" class="btnSubmit" />
</form>

On submit, the AJAX call will be triggered to send form’s file input to the PHP page upload.php. The script is,

<script type="text/javascript">
$(document).ready(function (e){
$("#uploadForm").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data:  new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#targetLayer").html(data);
},
error: function(){} 	        
});
}));
});
</script>

This AJAX call includes several options URL, Type, data and more. we are sending image file data by instantiating FormData. The success/failure handlers are triggered based on the result of the upload request.

Note

  • Import jQuery library before calling jQuery AJAX handler.
  • Find PHP script and css by extracting the source code zip added with this tutorial.

download