Ajax file upload with jQuery

JQUERY upload plugin

Sometimes we come into a problem that is a little harder to do when it comes to customizing and that is the file upload input. Well Andris Valums helps us with a plugin he created for jQuery.

The plugin requires jQuery 1.2 or above and allows users to upload multiple files without refreshing the page.

To make the plugin work you have to include jQuery and the plugin in your websites head.

%MINIFYHTML9271d770302c8a40cd0691dd910441946%%MINIFYHTML9271d770302c8a40cd0691dd910441947%

And after that you can add this for a div with a specific id:

$(document).ready(function(){

$.ajax_upload('#div_id', {
  // Location of the server-side upload script
  action: 'upload.php',
  // File upload name
  name: 'userfile',
  // Additional data to send
  data: {
    key1 : 'value',
    key2 : 'value2'
  },
  // Fired when user selects file
  // You can return false to cancel upload
  onSubmit: function(file, extension) {},
  // Fired when file upload is completed
  onComplete: function(file, response) {},
  // Fired when server returns the string
  onSuccess: function(file){},
  // Fired when server return something else
  onError: function(file, response){}
});

});

And after that just upload the file using:

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  echo "error";
}

You can find more info on: http://valums.com/projects/ajax-upload/ or check out the demo page : Demo

About The Author

I'm a 24 year old designer, web designer and web developer. I always liked computers and photography. I first started working on little computer programs and after finishing Informatics and Mathematics at "Gib Mihaescu College" I applied for Informatics at the "University of Craiova" and took my license this year. I"m currently aiming for a Masters Degree in the same field.