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.

%MINIFYHTML936798cf3af9a5ef88a3eeabf614b4120%%MINIFYHTML936798cf3af9a5ef88a3eeabf614b4121%

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