1

Como posso fazer isso? Tenho um formulário que tem alguns input text, gostaria que quando o usuário colasse uma url de uma imagem na web aparece ao lado um div com essa imagem. Creio que seria com Ajax mas não tenho nenhuma ideia de como começar.

4 Respostas 4

3

Basta criar o elemento com a URL da imagem:

// SEM jQuery
// Executa a ação ao sair do campo, também pode usar `onkeyup`
// para ser executado tada vez que uma tecla é solta (mas não vejo necessidade)
document.getElementById('imagem').onblur = function(){
   // Pega o elemento onde será "impressa" a imagem
   var res = document.getElementById('result'); 

   // Cria o elemento img
   var img = document.createElement('img'); 

   // Atribui a URL como src
   img.setAttribute('src', this.value); 

   // Limpa o lugar de "impressão"
   res.innerHTML = ''; 

   // "Imprime" a imagem
   res.appendChild(img); 
}

// COM jQuery
// Executa evento ao sair do campo 'blur'
// Também pode usar 'keyup' para executar quando soltar a tecla
$(document).on('blur', '#imagem2', function(event){
  event.preventDefault();
  
  // Pega o elemento de "impressão"
  $('#result').html(
    // Define o HTML dele como um novo element
    // img com src do valor do input
    $('<img />').attr('src', this.value)
  );
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
SEM jQuery: <input type="url" id="imagem" /> <br>
COM jQuery: <input type="url" id="imagem2" /> <br>
<div id="result"></div>

5
  • Kadu, muito obrigado!
    – William
    13/07/2015 às 17:19
  • Kadu, Nesse seu script teria como eu não apresentar a imagem tamanho real? Gostaria de apresentar uma imagem de 50 x 50 px
    – William
    13/07/2015 às 18:16
  • Tem sim, com jQuery você coloca assim $('<img />').attr('src', this.value).css({'width': '50px', 'height': '50px') sem faz assim: jsfiddle.net/tfx2op7p/1
    – KaduAmaral
    13/07/2015 às 18:20
  • Kadu, deu certinho! Agora só preciso de mais 2 campos: Como posso pegar o que digitei no input text e exibir na div, o outro campo teria como pegar a data e hora atual e jogar em um input tbm?
    – William
    13/07/2015 às 21:48
  • @William a lógica é a mesma, só que você não vai precisar criar a tag img basta setar o valor da propriedade text assim $(elemento).text( 'valor do texto' )
    – KaduAmaral
    13/07/2015 às 23:57
2

Então, para esse resultado não é necessário AJAX, uma vez que seu usuário vai colar uma URL de imagem da web. Se você colocar a url no atributo SRC do elemento html IMG assim que o usuário colar, você vai obter o resultado esperado.

Creio que seu maior problema vai ser validar se a url gerou uma imagem válida. Segue uma sugestão de código:

window.changemeurlexample = function(e, el){  
  var resultimg = document.querySelector('#urlexampleresult');
  resultimg.setAttribute('src',el.value);
  document.querySelector('.str').innerHTML = el.value;
};
var resultimg = document.querySelector('#urlexampleresult');
resultimg.onerror = function(){
  alert('Imagem inválida.');
}
.fleft{ float:left; }
.fright{ float: right; }
.fclear{ clear: both; }
.snippet #inputurl{padding: 5px; border: 1px solid #777;border-radius:2px;}
.result-image img{margin-left:20px;max-width: 200px;height:auto;display:block;min-width: 200px;height:200px;background-color:#eee;}
<div class="snippet">
  <div class="fleft">
    <input onkeyup="window.changemeurlexample(event, this);" name="inputurl" id="inputurl" />
  </div>
  <div class="fright">
    <div class="result-image">
      <img src="" id="urlexampleresult" />
    </div>
  </div>
  <div class="str"></div>
  <div class="fclear"></div>
</div>

0

Olá,

De uma maneira bem simples, e sem validacoes ficaria mais ou menos assim:

$(function(){
  $('#btn_carrega_imagem').click(function(){
      $('#container_img').html('<img src="'+$("#url_imagem").val()+'" />');
      $('#container_img').show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" >
    <input type="text" name="url_imagem" id="url_imagem" value="http://www.palmeiras.com.br/public/upload/imagem/times//imagem_20_original.png" />
    <button id="btn_carrega_imagem">Carregar Imagem</button>
</form>

<div id="container_img">
    
</div>

Espero ter ajudado

Abraços

0

Aproveitando o gancho da pergunta, exibiu tudo certo, porém eu gostaria de não apresentar a imagem no tamanho real, teria como usar alguma função ou propriedade para carregar no tamanho exemplo 50px x 50px ?

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .