Image File Upload With Ajax and PHP

Uploading files to servers is required in almost every website and web applications. To make file uploading easier and user friendly it should be done via an Ajax call. With Ajax your whole page will not be sent to server and hence user will not have to wait more.  In this tutorial I will show you how you can easily create a similar system using a wonderful jquery form plugin form.js and bootstrap. Form.js makes it really pretty simple to post HTML form data via Ajax. You don’t need any special markup to be added in your HTML. Everything is handled in jQuery part. Visit form.js official documentation to find more information with examples.   I have used bootstrap CSS to make it look better.

ajaxfileupload

LIVE DEMO    DOWNLOAD

The HTML code is really pretty simple:


<form id="itform" onsubmit='return showNoFile();' action="upload.php" method="post" enctype="multipart/form-data">
 <input type="file" onchange="file_selected = true;" name="myfile">
 <input type="submit" class="btn btn-success" value="Click Me To Upload">
 </form>

This form will be used by user to select a file and upload it to server. If the user has not selected any file and directly hits “Upload” button then the form will not be submitted and will prompt user to select a file.

If user selects a file then form will be submitted and form action “upload.php” will come into picture. Upload.php contains code to check if the file is an image or not? it also checks the file size. If everything is fine then it will upload the file to server else it will return “Invalid File error“. You can edit Upload.php script and add file type filter based on your requirement.

During this whole process we have another file named “uploader.js“. This javascript file uses jquery form plugin’s features and is responsible for all ajax calls. Calling ajaxform function is really simple. We have passed ‘options‘ as parameter, it has all the needed function calls.  Let me tell you all simple functions offered by jQuery form plugin.

  • BeforeSubmit: This function makes pre-submit callback
  • Success: post-submit call back
  • uploadProgress: It is called during file upload.
  • Complete: Final response from server.

Here’s our uploader.js:


$(document).ready(function()
{

var options = {
 beforeSubmit: function()
 {
 // pre submit callback
 $("#progress").show();
 $("#result").html("");
 $("#percent").html("0%");
 },
 uploadProgress: function(event, position, total, percentComplete)
 {
 //during submission
 $("#bar").width(percentComplete+'%');
 $("#percent").html(percentComplete+'%');

 },
 success: function()
 {
 //post submit call back
 $("#progress-bar").addClass("progress progress-success progress-striped");
 $(".bar").css("width","100%");
 $(".percent").html('100%');

},
 complete: function(response)
 {

if(response.responseText=="Invalid File"){
 $("#progress-bar").hide();
 $("#result").html("<font color='red'>"+response.responseText+"</font>");}
 else{
 $("#progress-bar").show();
 $("#result").html(response.responseText);
 }

 },
 error: function()
 {
 $("#result").html("<font color='red'> ERROR: unable to upload files</font>");

}

};

$("#itform").ajaxForm(options);

});
// If File is not selected.
var file_selected = false;
function showNoFile() {
 if(!file_selected) {
 alert('No file selected!');
 return false;
 }
else{
return true;
}
}

This code is tested in chrome and mozilla. You can download this and use where ever you want. It can be tweaked to achieve better functionalities. You can download the code from here

4 thoughts on “Image File Upload With Ajax and PHP”

  1. This code is not uploading image file through Ajax. If u remove form action then this will not upload any image.

    1. Hi Rajkumar,

      Yes if you will remove action then it wont work because its a requirement for form.js plugin which I have used in this tutorial (check plugin code to understand, it fetches action attribute value and set it to url variable, which is passed to ajax).
      Note: form.js plugin’s main role is to enable ajax in your normal HTML form.
      If you don’t use form.js plugin then you will have to pass ‘upload.php’ via ajax using $.post or $.ajax.

  2. Hi

    First thing, easy and great tutorial. However i can seem to find the code for upload.php anywhere?

Comments are closed.