Put a url in the text field and show it in a DIV next to it

Navigation
1

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

    
asked by anonymous 13.07.2015 / 18:50

4 answers

3

Just create the element 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>SEMjQuery:<inputtype="url" id="imagem" /> <br>
COM jQuery: <input type="url" id="imagem2" /> <br>
<div id="result"></div>
    
13.07.2015 / 19:00
2

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

I think your biggest problem will be validating if the url generated a valid image. Here's a code hint: 

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>
    
13.07.2015 / 19:21
0

Hello,

In a very simple way, and without validations it would look something 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><formaction="" 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 have helped

Hugs

    
13.07.2015 / 19:01
0

Taking advantage of the question hook, it displayed all right, however I would like to not display the image at actual size, would I use some function or property to load in the example size 50px x 50px?

    
13.07.2015 / 20:15
Reading JSON result with PHP PDO connection to bank