работа с input type file

[Moloch]

Здравствуйте, подскажите пожалуйста как на jQuery реализовать выбор файла и выбранный файл сделать фоном определенного блока?

<input type='file'>
<div>У этого блока сделать фоном выбранный файл</div>

[Moloch]

вот так правильно?

...
    CreatePuzzle.prototype.chooseImage = function(){
        var control = $(".puzzle-dialog");
        var self=this;
            control.on("change", function() {
                self.readURL(this);
         });
    }

CreatePuzzle.prototype.readURL = function(input){
     if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('.puzzle').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
}

[Decode]

<input class="file" type="file" />
<div class="block" style="min-height: 500px;">У этого блока сделать фоном выбранный файл</div>

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
	$('.file').change(function() {
	  var reader = new FileReader(), 
		  file = this.files[0], div = $('.block');

	  reader.onloadend = function() {
		div.css('background', 'url(' + this.result + ')');
	  }

	  file ? reader.readAsDataURL(file) : div.css('background', 'none');
	});
</script>

[Moloch]

Спасибо а как в эту функцию передать контекст? у меня например уже определен div = $('.block'); в объекте я хочу чтобы можно было написать this.мое_свойство.css('background', 'url(' + this.result + ')');

Разобрался.

[Moloch]

и как например мне сделать фон с теми же размерами что и у картинки? у меня была идея сначала загружать картинку, получать ее размеры а потом удалять из DOM. Как можно это рациональнее сделать?

[Decode]

и как например мне сделать фон с теми же размерами что и у картинки?

<input class="file" type="file" />
<div class="block">У этого блока сделать фоном выбранный файл</div>

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$('.file').change(function() {
  var reader = new FileReader(), 
	  file = this.files[0], div = $('.block');

  reader.onloadend = function() {
	var img = document.createElement('img');
	img.src = this.result;
	
	img.onload = function() {
	  div.css({
		width: img.width,
		height: img.height
	  });
	};
	
	div.css('background', 'url(' + this.result + ')');
  }

  file ? reader.readAsDataURL(file) : div.css('background', 'none');
});
</script>

[Moloch]

спасибо!