Criar visualização de imagem ao colocá-la em um input type text

  • Autor Autor faxred2sp
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
F

faxred2sp

Alfa
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Hola chicos! me gustaría ver si alguno me podría proporcionar algunos indicios para poder colocar una url en un input y que automaticmente(jquery) ponga una vista previa de dicha imagen. Si necesitan más información o que les explique mi idea más a fondo haganmelo saber 🙂
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
[MENTION=156503]faxred2sp[/MENTION]

Eso se hace con JS / JQUERY :encouragement:

* No es necesario usar PHP
 
[MENTION=156503]faxred2sp[/MENTION] lo que dices se hace facilmente con jquery pero explicate un poco de lo que quieres hacer!! :encouragement:
 
[MENTION=156503]faxred2sp[/MENTION]

Eso se hace con JS / JQUERY :encouragement:

* No es necesario usar PHP

En efecto, por eso puse que con Jquery :encouragement:

- - - Actualizado - - -

[MENTION=156503]faxred2sp[/MENTION] lo que dices se hace facilmente con jquery pero explicate un poco de lo que quieres hacer!! :encouragement:

lo que quiero es que al clickear en en un boton que dice "Previsualizar" en en un div donde se pondrá la imagen se actualice el src por la imagen que el usuario ingreso dentro del input
 
[MENTION=156503]faxred2sp[/MENTION] prueba con esto!

PHP:
<div class="box-previsualizar">
	<img src="" class="img-previsualizar" style="display: none;">
</div>

<input type="text" class="input-url" placeholder="Ingresa la url de la imagen...">
<button type="button" class="btn-previsualizar">Previsualizar!</button>

<script>
$(document).ready(function(){
	
	$(document).on('click', '.btn-previsualizar', function(){
		
		var inputurl = $('.input-url').val();
		
		if(inputurl !== ''){
			$('.img-previsualizar').attr('src', inputurl).show();
		} else {
			alert('El input esta vacio!');
		}
		
	});
	
});
</script>
 
[MENTION=156503]faxred2sp[/MENTION] prueba con esto!

PHP:
<div class="box-previsualizar">
	<img src="" class="img-previsualizar" style="display: none;">
</div>

<input type="text" class="input-url" placeholder="Ingresa la url de la imagen...">
<button type="button" class="btn-previsualizar">Previsualizar!</button>

<script>
$(document).ready(function(){
	
	$(document).on('click', '.btn-previsualizar', function(){
		
		var inputurl = $('.input-url').val();
		
		if(inputurl !== ''){
			$('.img-previsualizar').attr('src', inputurl).show();
		} else {
			alert('El input esta vacio!');
		}
		
	});
	
});
</script>

No me funciono, mira te muestro como quedo el código

PHP:
	echo'
	<script>
	$(document).ready(function(){
    
    	$(document).on(\'click\', \'.btn-succes\', function(){
        
        	var inputurl = $(\'#avatar\').val();
        
        	if(inputurl !== \'\'){
            	$(\'#miAvatar\').attr(\'src\', inputurl).show();
        	} else {
            	alert(\'El input esta vacio!\');
        	}
    	});
    });
	</script>  ';

	echo'<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">Cambiar avatar</h3>
		</div>
		<div class="panel-body">
			<div class="row">
				<div class="col-sm-8">
					<form onsubmit="return load_new_avatar();"  action="/users/change_avatar" method="POST">
						<input type="hidden" name="user" value="'.$row['id_u'].'" />
						<div class="form-group">
							<label>Avatar:</label>
							<input type="text" name="avatar" id="avatar" onfocus="foco(this);" class="form-control" required />
							<label id="errorss"></label>
						</div>
						<button type="button" class="btn btn-succes" />Previsulizar</button>
						<button type="submit" class="btn btn-default">Actualizar avatar</button>
					</form>
				</div>
				<div class="col-sm-4">
					<img src="'.$row['avatar'].'" class="img-responsive img-circle" id="miAvatar" />
				</div>
			</div>
		</div>
	</div>';
 
[MENTION=156503]faxred2sp[/MENTION] que error te sale? a lo mejor estas cargando la libreria de jquery despues de el codigo que te pase!
 
Última edição:
[MENTION=156503]faxred2sp[/MENTION] que error te sale? a lo mejor estas cargando la libreria de jquery despues de el codigo que te pase!

cierto, no recordaba que jquery lo puse debajo del footer, te lo agradezco. Habrá alguna forma de que cando quite el mouse del input automáticamente muestre la imágen sin usar el boton de previsualizar?
 
[MENTION=156503]faxred2sp[/MENTION] si prueba con esto!

PHP:
$(document).on('change', '#avatar', function(){

    var inputurl = $('#avatar').val(); 
    if(inputurl !== ''){
        $('#miAvatar').attr('src', inputurl).show();
    } else {
        alert('El input esta vacio!');
    }

});
 
[MENTION=156503]faxred2sp[/MENTION] si prueba con esto!

PHP:
$(document).on('change', '#avatar', function(){

    var inputurl = $('#avatar').val(); 
    if(inputurl !== ''){
        $('#miAvatar').attr('src', inputurl).show();
    } else {
        alert('El input esta vacio!');
    }

});

Me funciono perfecto, te lo agradezco
 
Voltar
Topo