Как сделать preview img by input file?

Question

[My1Name]

На странице есть скрытый input:

<div style="display:none;"><input type="file" id="logo" name="logo" accept="image/png, image/jpeg, image/gif"></div>

По нажатию на картинку вызывается функция:

function loadLogo(){
  var div = $('#u-data #logo');
  $(div).click().bind('change', function(){
   if($(this).val()){
   alert('file attached');
//preload img
}
else {
alert('No have file');
}
$(div).off('change');
$(div).unbind('click');
});
}

Эта функция работает не правильно. Она накапливает адреса (события), если юзер сразу не определился и нажал "отмена"... Как это исправить и сделать preload (preview) img в DOM? То есть нужно заменить картинку, на которой был сделан click (не загружая файл на сервер):

<img src="/media/No-logo.png" class="media-object U-logo"/>

JS

$('.U-logo').css('cursor','pointer').attr('onclick','loadLogo()');

Answer 1

[My1Name]

function loadLogo(){
var div = $('#u-data #logo');
$(div).click().change(function(){
if($(this).val()){
  var input = $(this);
  var reader = new FileReader();
  reader.onload = function (){
     $('.content').find('img').attr('src', reader.result);
  }
  reader.readAsDataURL(input[0].files[0]);
}
$(div).off('change');
$(div).unbind('click');
});
}

Вроде бы всё работает.