Place a url in the text field and show it in a DIV next door

Question

How can I do that? I have a form that has some input text, I would like when the user pastes a url of an image on the web appears next to a div with that image. I think it would be with Ajax but I have no idea how to start.

Answer 1

Just create the widget with the image URL:

// 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>

Answer 2

So for this result it is not necessary to AJAX since your user will paste a web image URL. If you put the url in the SRC attribute of the IMG html element as soon as the user paste, you will get the expected result.

I think your biggest problem is going to be validating whether the url generated a valid image. Follow a code suggestion:

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>

Answer 3

Hello,

In a very simple way, and without validations would be more or less like this:

$(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>

I hope I’ve helped

Hugs

Answer 4

Taking advantage of the hook of the question, displayed everything right, however I would like to not present the image in full size, would have to use some function or property to load the sample size 50px x 50px ?