CODEWITHSUNDEEP
jquery
LTech
LTech

Reputation: 1761

Preview an image from url input

I have this code - to preview an image from a url - and it works great, except it only runs when a user clicks outside the input box. How do I change it so it will run straight away when a value is put in the input box. I need the image to show up straight away. I think I need to change onblur to onchange but I tried to change it and it didn't work. 

 <input name="input_19" id="input_2_19" type="text" value="" class="medium" placeholder="http://" aria-invalid="false">
    <script> 


     jQuery('#input_2_19').blur(function() {
        var src = jQuery(this).val();

    var previews =  jQuery(".previewImage");
    var drawPreview = true;

    var PreviousSource =  jQuery(this).data('previousSource');

    if(!src.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,6}(?:/[^/#?]+)+\.(?:jpg|gif|png|jpeg)$") && src != "")
    {
          jQuery("#warning").html("Must be an image");
          return false;  
    } else {
         jQuery("#warning").html("");
    }

     jQuery.each(previews , function(index, value) { 
        if (src == "" && PreviousSource == $(value).attr('src'))
        {
              jQuery(value).remove();
             drawPreview = false;
             return false; 
        }
        if( jQuery(value).attr('src') == src)
        {
            drawPreview = false;
            return false;
        }
    });

    if(drawPreview) {
         jQuery('#prev').append('<img class="previewImage" style="max-width:500px;" src="' + src + '">');   
    }
    var previousSource =  jQuery(this).data('previousSource', src);
    });
    </script>

    <div id="warning"></div>
    <div id="prev"></div>

http://jsfiddle.net/W69aA/10/

Follow-up Question When I add a URL the image shows. But if I change the URL then another image shows too and I have two images. How do I make it to only show one image.

Also why is this URL displaying an error: https://ae01.alicdn.com/kf/HTB1q0ucSYrpK1RjSZTEq6AWAVXap/Mifa-Portable-Bluetooth-speaker-Portable-Wireless-Loudspeaker-Sound-System-10W-stereo-Music-surround-Waterproof-Outdoor-Speaker.jpg

Upvotes: 2

Views: 1579

Answers (1)

Jo&#227;o Pimentel Ferreira
Jo&#227;o Pimentel Ferreira

Reputation: 16292

You need to trigger upon the event oninput and not blur. Here the code you need. You can run here on this snippet. I tried and it works

$('.test').on('input', function() {
  var src = jQuery(this).val();

  var previews = $(".previewImage");
  var drawPreview = true;

  var PreviousSource = $(this).data('previousSource');

  if(!src.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,6}(?:/[^/#?]+)+\.(?:jpg|gif|png|jpeg|webp)$") && src != "") {
    $("#warning").html("Must be an image");
    return false;  
  } else {
    $("#warning").html("");
  }

  $.each(previews , function(index, value) { 
    if (src == "" && PreviousSource == $(value).attr('src')) {
      $(value).remove();
      drawPreview = false;
      return false; 
    }
    if($(value).attr('src') == src) {
      drawPreview = false;
      return false;
    }
  });

  if(drawPreview) {
    $('#prev').append('<img class="previewImage" style="max-width:50px;" src="' + src + '">');   
  }
  
  var previousSource = $(this).data('previousSource', src);
});
.test{
  display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="0" type="text" class="test" />
<input id="1" type="text" class="test"/>
<input id="3" type="text" class="test"/>

<div id="warning"></div>
<div id="prev"></div>

Upvotes: 3

Related Questions