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 ?

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>

The first thing you probably want to change is add src == "" to check for empty strings when you validate the value of the input.

if (src == null || src == undefined) {

Check out this fiddle you can validate if it is an image using this regex

 if(!src.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,6}(?:/[^/#?]+)+\.(?:jpg|gif|png)$"))
    {
         alert("must be an image")
         return false;  
    }

Your final code would look something like this

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

    var src = jQuery(this).val();

    if(!src.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,6}(?:/[^/#?]+)+\.(?:jpg|gif|png)$"))
    {
         alert("must be an image")
         return false;  
    }

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

    if (src == null || src == undefined || src == "") {
        //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 think you forgot a little bit complex problem: How to get the real imagepath? You need it if you wanna create a real preview without uploading the image.
I work around this issue and waste a lot of time, as It is almost imposible to get the path from javascript. But finaly found a way to get a real preview.
I'll share it here, because your code offers a good enough validation. So I can supouse it was done.
When the image is selected usig a file mannager or a exporer at client side, a temporary path is created, and it is accesible. So, you must create an object from that path using the method: "URL.createObjectURL()" and then append it to an <img /> element's "src" attribute. here is a code snippet as a sample:

1. a small styles sheet to easy encode
// myStyles.css
// ... 
.collapsed-element { diplay: none; }
// ...
2. A hidden container element to prepare the previewed image
<!-- my html page !-->
<!-- the workhorse in a hidden container -->
<div id="canvas-container" class="collapsed-element">
    <img src="" class="canvas" id="canvas-input">
</div><div class="clear-block"></div>

3. The widget to have a working input set
<!-- The imput set: a table-row with a  file input and a related img-preview element -->
<table id="my-image-getter-widget">
<tr>
<td style="width: 15%" id="prw-container">
   <!-- fibopad.gif is a transparent pad using Fibonacci numbers as dimentions (a personal preference) -->
   <!-- graphema will be the file input name; so I asign it as a class-prefix attribute in the related viewer -->
   <img src="/path_to_a_transparent_image_pad/fibopad.gif" alt="" title="" width="46" height="75" class="graphema-vwr"/>
</td>
<td id="the-input-set-column" style="width: 85%">
       <!-- a text input to show the old path if you are editing and have an older loaded image -->
       <!-- note the "graphema" word used elsewhere to relate elements and get a way to easy encode --> 
       <div class="container-inline">
           <div class="form-item" id="edit-graphema-txt-wrapper">
               <label for="edit-graphema-txt">Image File:</label>
               <input type="text" maxlength="255" name="graphema_txt" id="edit-graphema-txt" size="45" value="" class="form-text"/>
           </div>
       </div>
    <!-- The image input note the name="files[graphema]" attribute as array item -->
    <!-- the class "enabled-prvw" will be added to inputs at onload event and will be used by javascript code to bind behaviors and get the preview -->
       <div class="container-inline">
           <div class="form-item" id="edit-graphema-wrapper">
                <label for="edit-graphema">Load a image:</label>
                <input type="file" name="files[graphema]" class="form-file" id="edit-graphema" size="60"/>
           </div>
        </div>
    <!-- A helper tip for users -->
    <div class="description">
           <br/>Blah, blah ... blah ... 
    </div>
</td>
</tr>
</table><!-- widget end -->

4. Finaly! the javascript
// Filename: myimage-preview.js
// a function to properly hall the preview image with a good container's resizing
function set_dimentions_for_previewer(curwidth, curheight, standarlimit, targetid){
  var nw = standarlimit;
  if(curheight > 10){ nw = parseInt(( curwidth * standarlimit) / curheight ); }
  $(targetid).attr('height', standarlimit); $(targetid).attr('width', nw);
}

// a function to bind events and show selections (do not performs validation, so you must add it)
// I'd commented my debug lines cause my modal dialog is not present
function enable_preview_for_imageinput(){
  // var ondebug = Settings.lgq_debug_js_enabled;
  $("input:file").each(function(){
    var id = '' + $(this).attr('id');   
    var idselector = '#'+id;     
    // if(ondebug === 1){ estatus_add('binded change event<br>'); }
    if(!$(idselector).hasClass('enabled-prvw')){
        $(idselector).bind("change", function( event ){
            var chunk = id.split('-', 2);
            var imgclass = '.'+chunk[1]+'-vwr';
            // /*
            $('img.canvas').bind('load', function(){
                // if(ondebug === 1){ status_add('Image added to canvas <br>'); }
                var curheight = $('img.canvas').attr('height'), curwidth = $('img.canvas').attr('width');
                // if(ondebug === 1){ status_add('dimentions width ='+curwidth+', height ='+curheight+' <br>'); }
                set_dimentions_for_previewer(curwidth, curheight, 75, imgclass);
                $('img.canvas').unbind('load');
            });
            $('.canvas').attr('src',URL.createObjectURL(event.target.files[0]));        
            $(imgclass).fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));
            // var tit = 'Change event at '+id;
            // var msg = ''+$( idselector ).val();        
            // message_sys(tit, msg);
        });
        $(idselector).addClass('enabled-prvw')
    }
    // if(ondebug === 1){ estatus_add('Binded input: '+id+'  \n'); }
  });
  // if(ondebug === 1){ message_sys('Load success', get_status() ); }
}

// an onload call to enable all
$(document).ready(function(){
  enable_preview_for_imageinput();
});