Tom Tom - 5 months ago 21
jQuery Question

Getting Image Preview jQuery

I am trying to implement a simple jquery function which basically takes a HTML link and show an image preview however I cannot seem to get it working.

I have used JSFiddle - http://jsfiddle.net/W69aA/1/ - to show what I'm trying to do with code

$('.test').blur(function() {

var src = jQuery(this).val();
var prevImg = jQuery('#prev > [id^="prevMe-"]').length;

if (src == null || src == undefined) {
//trying to remove image if it's the same value or input is emptied
jQuery('#prevMe-' + (prevImg - 1)).remove();
} else {
jQuery('#prev').append('<img id="prevMe-' + prevImg + '" style="max-width:50px;" src="' + src + '">');
}
});


I am trying to:


  1. Remove the preview image if the input link is removed

  2. Show the preview image if input is there

  3. Validate it's an image [gif,jpg,png]



Can anyone assist ?

Answer

Your implementation works to a point, I've had a go at changing it to do a little more of what you hoped for. Hope it helps.

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

<script> 
$('.test').blur(function() {

var src = jQuery(this).val();
var LinkedImage = $(this).data('linkedImage');
$(LinkedImage).remove();

if(!src.match("http:\/\/.*\/(.*)\.(jpg|jpeg|png|gif)") && src != "")
{
     $("#warning").html("Must be an image");
      return false;  
} else {
    $("#warning").html("");
}

if (src != "") {
   $('#prev').append('<img class="previewImage" style="max-width:50px;" src="' + src + '">');
   $(this).data('linkedImage', $('img:last' ,'#prev'));      
}

});
</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>
Comments