Image Thumbnail via URL

Asked

Viewed 112 times

1

I want to do so:

There is a field where the user inserts the URL of an image, and wanted when pasting this url in the field, a thumbnail appears beside (or below) the field, similar to what FB does, where vc pastes the video url in the post, and it displays the thumbnail.

  • 1

    Ta, what? What’s your question? : ) Post an example of what you’ve tried

  • I haven’t tried, it just has the input that the guy puts the url, I don’t know where to start!

  • I believe that this way it is difficult to help, understand that this type of question is of type "do everything for me", if possible, read: http://meta.pt.stackoverflow.com/questions/5483/manual-de-como-n%C3%83o-fazer-perguntas

  • 1

    I answered a similar question, it may help, but the same question was also closed, see http://answall.com/questions/179198/como-fazer-um-link-formatum-sistema-que-leia-contentofothers-sites-webs/. Although it is in PHP the logic is the same.

  • @Marcelobonifazio I don’t want them to do it for me, just to give me tips on the subject. I’m starting practically now, but just saying what I can use is enough.

1 answer

2


Use the Jquery "Paste" event to detect pasting the url into the field and then retrieve the value and create the img element with the image.

$(document).ready(function(){   
  
    //ao colar a url no campo
    $("#url").bind('paste', function() {
        setTimeout(function(){
          
          var url = $("#url").val();
          var img = '<img src="'+url+'">';
          $(".img").append(img);
        
        }, 100);
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

URL: <input type="text" name="url" id="url">

<p align="center">
  <div class="img"></div>
</p>

  • That’s more or less what I want, so I’ll test it. Thank you

  • Glauber ball show!! Thanks

Browser other questions tagged

You are not signed in. Login or sign up in order to post.