Question

This is avatar change and upload. When I click “Upload New Image” button fist browse window will appear then I select one avatar then selected avatar will show. This function possible at Jquery?

My try:
http://jsfiddle.net/anglimass/uBGpR/

Anybody please help me!!

Thanks

Answer 1

This can be done using the AJAX Upload jQuery plugin.

Begin with including jQuery and the plugin:

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

The final JavaScript:

$(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);
    }
  });
});

This example is taken from this very good tutorial.