输入变化后的图像变化

Question

JSfiddle演示：http://jsfiddle.net/ZfT64/1/

每当用户在image url框中输入input时，我都希望立即将它们添加到图像部分的img_logo id中。

不确定该使用什么event。

这是我的密码:-

<input type="text" name="org_img" id="org_img" class="input-xlarge" placeholder="http://www.example.com/logo.png" value="<?php echo isset($row['org_img']) ? htmlentities($row['org_img']) :  'http://www.example.com/img/logo.png'; ?>" />

<span class="pull-right" id="img_logo"><img width="300px" height="80px" src="<?php echo isset($row['org_img']) ? htmlentities($row['org_img']) :  'http://www.example.com/img/logo.png'; ?>" /></span>

下面是img_logo ID中有效性和附加的Javascript函数。

function IsValidImageUrl(url, callback) {
    jQuery("<img>", {
        src: url,
        error: function() { callback(1); },
        load: function() { callback(0); }
    });
}



jQuery('#org_img').change(function() {
    var img_name = jQuery('#org_img').val();
    IsValidImageUrl(img_name, function (val){
        if (val == 0)
            jQuery('#img_logo').html('<img src="'+img_name+'" width="300px" height="80px" />');
        if (val == 1)
            alert('Please Provide Valid URL Image');
            jQuery('#img_logo').html('<img src="http://www.example.com/img/logo.png" width="300px" height="80px" />');
    });
});

但这不管用，需要帮助。

谢谢

Answer 1

看看这个

http://jsfiddle.net/ZfT64/4/

function IsValidImageUrl(url, callback) {
    jQuery("<img>", {
        src: url,
        error: function() { callback(1,null); },
        load: function() { callback(0,url); }
    });
}

$('#org_img').change(function() {
    var img_name = $(this).val();
    IsValidImageUrl(img_name, function (val,url){
        if (val == 0) {
            $('#image_logo').attr('src',url);
        }
        if (val == 1) {
            alert('Please Provide Valid URL Image');
            $('#image_logo').attr('src',"https://www.google.com/images/srpr/logo11w.png");
        }
    });
});