Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   работа с input type file (https://javascript.ru/forum/jquery/57293-rabota-s-input-type-file.html)

Moloch 28.07.2015 18:05
работа с input type file
 
Здравствуйте, подскажите пожалуйста как на jQuery реализовать выбор файла и выбранный файл сделать фоном определенного блока?

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

Moloch 28.07.2015 18:57
вот так правильно?
...
    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 28.07.2015 23:34 
<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 29.07.2015 14:31
Спасибо а как в эту функцию передать контекст? у меня например уже определен div = $('.block'); в объекте я хочу чтобы можно было написать this.мое_свойство.css('background', 'url(' + this.result + ')');

Разобрался.

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

Decode 29.07.2015 16:06
Цитата:
Сообщение от Moloch
и как например мне сделать фон с теми же размерами что и у картинки?
 
<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 29.07.2015 17:36
спасибо!


Часовой пояс GMT +3, время: 03:28.