работа с input type file
Здравствуйте, подскажите пожалуйста как на jQuery реализовать выбор файла и выбранный файл сделать фоном определенного блока?
<input type='file'> <div>У этого блока сделать фоном выбранный файл</div> |
вот так правильно?
...
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]);
}
}
|
<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>
|
Спасибо а как в эту функцию передать контекст? у меня например уже определен div = $('.block'); в объекте я хочу чтобы можно было написать this.мое_свойство.css('background', 'url(' + this.result + ')');
Разобрался. |
и как например мне сделать фон с теми же размерами что и у картинки? у меня была идея сначала загружать картинку, получать ее размеры а потом удалять из DOM. Как можно это рациональнее сделать?
|
Цитата:
<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>
|
спасибо!
|
| Часовой пояс GMT +3, время: 02:48. |