Image Uploads with 100% Less Suck. Guaranteed.

The Code

You're going to need jQuery and the AJAX Upload jQuery plugin. Link them up, make sure jQuery is loaded first.

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>

Here is the JavaScript we're going to add in its entirety. You can also see it if you view the source of this page.

$(document).ready(function(){

  var thumb = $('img#thumb');

  new AjaxUpload('imageUpload', {
    action: $('form#newHotnessForm').attr('action'),
    name: 'image',
    onSubmit: function(file, extension) {
      $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
      thumb.load(function(){
        $('div.preview').removeClass('loading');
        thumb.unbind();
      });
      thumb.attr('src', response);
    }
  });

});

Now let's break it down.

First we attach the the AjaxUpload behavior to our file form element.

new AjaxUpload('imageUpload', {

Next we specify where we want to post the AJAX upload to. We like to keep all our urls in our html document so we pass this url using the action attribute of our form element.

action: $('form#newHotnessForm').attr('action'),

Set the name of the file form element that will be posted to your server.

name: 'image',

Add a class to your preview div to indicate that the image is uploading. In our case we are applying a background image to the preview div. We also need to display: none; the img tag in the preview div so that the loading background image is visible, also for a more subtle reason explained below.

onSubmit: function(file, extension) {
  $('div.preview').addClass('loading');
},

When the image has been uploaded we need to do two things. First we need to set the src attribute of our preview img tag to the new thumb. Secondly we need to remove the loading class. If we simply execute those things in that order then we will see an annoying flicker of the old image when the loading class has been removed but the new image has not yet loaded.

We avoid this problem by waiting to remove the loading class until after the preview image's load event fires. We also unbind our listener after it had fired since we only wanted to capture this event once.

onComplete: function(file, response) {
  thumb.load(function(){
    $('div.preview').removeClass('loading');
    thumb.unbind();
  });

Lastly we set the source of preview image to the thumbnail our server just created. In this example the response from the AJAX call is just the thumbnails url as text. You could also return it in whatever fancy format you like.

  thumb.attr('src', response);
}