cargar imagen seleccionada con un input file

[virla]

Hola amigos, espero puedan ayudarme.
tengo un codigo que funciona muy bien, pero quisiera agregarle un aditivo, como el de cargar la imagen.
les pongo el codigo

Código:

<!-- Javascript -->
<script>
    $(document).ready(function () {
        $('#avatar').FileInput({ placeholder: 'No hay archivo seleccionado...' });
    })
</script>
<!-- / Javascript -->

<div class="drop-avatar-zone">
    <div class="avatar-thumbnails">
        <img src="avatar/avatar.png">aca tiene ya cargada una imagen, pero debe ser reemplazada por la seleccionada
    </div>
</div>
<input type="file" id="avatar">

(function() {
  var FileInput;

  FileInput = function($input, options) {
		if (options == null) {
		  options = {};
		}
		this.options = $.extend({}, FileInput.DEFAULTS, options || {});
		this.$input = $input;
		this.$el = $('<div class="file-input"><span class="file-filename"></span><div class="file-actions"></div></div>').insertAfter($input).append($input);
		this.$filename = $('.file-filename', this.$el);
		this.$clear_btn = $(this.options.clear_btn_tmpl).addClass('boton rojo').appendTo($('.file-actions', this.$el));
		this.$choose_btn = $(this.options.choose_btn_tmpl).addClass('boton azul').appendTo($('.file-actions', this.$el));
		this.onChange();
		$input.on('change', (function(_this) {
		  return function() {
		    return $.proxy(_this.onChange, _this)();
		  };
		})(this)).on('click', function(e) {
		  return e.stopPropagation();
		});
		this.$el.on('click', function() {
		  return $input.click();
		});
		this.$choose_btn.on('click', function(e) {
		  return e.preventDefault();
		});
		return this.$clear_btn.on('click', (function(_this) {
		  return function(e) {
		    $input.wrap('<form>').parent('form').trigger('reset');
		    $input.unwrap();
		    $.proxy(_this.onChange, _this)();
		    e.stopPropagation();
		    return e.preventDefault();
		  };
		})(this));
	};

	FileInput.DEFAULTS = {
		choose_btn_tmpl: '<a href="#" class="boton azul">Seleccionar</a>',
		clear_btn_tmpl: '<a href="#" class="boton rojo"><i class="fa fa-times"></i> Borrar</a>',
		placeholder: null
	};

  FileInput.prototype.onChange = function() {
    var value;
    value = this.$input.val().replace(/\\/g, '/');
    if (value !== '') {
      this.$clear_btn.css('display', 'inline-block');
      this.$filename.removeClass('placeholder');
      return this.$filename.text(value.split('/').pop());
    } else {
      this.$clear_btn.css('display', 'none');
      if (this.options.placeholder) {
        this.$filename.addClass('placeholder');
		return this.$filename.text(this.options.placeholder);
      } else {
        return this.$filename.text('');
      }
    }
  };

  $.fn.FileInput = function(options) {
    return this.each(function() {
      if (!$.data(this, 'FileInput')) {
        return $.data(this, 'FileInput', new FileInput($(this), options));
      }
    });
  };

  $.fn.FileInput.Constructor = FileInput;

}).call(this);