Question

任何人都可以帮助我吗？我想在中显示图像链接的预览。如果您输入（例如前缀.png或.jpg）中的链接，则应显示在img元素中。请不要php或服务器端，它应该显示图像/链接，如http://hellopledge.files.wordpress.com/2012/07/hello_medium-file3.jpg

谢谢

Answer 1

像这样：http://jsfiddle.net/uHnFp/

$('#field').keyup(function(){
   $('#img img').attr('src',$(this).val());
});

修改：

http://jsfiddle.net/uHnFp/6/

$('#field').keyup(function(){
    var text = $(this).val();
    var url = text.match(/https?:\/\/(?:[a-z\-]+\.)+[a-z]{2,6}(?:\/[^\/#?]+)+\.(?:jpe?g|gif|png)/g);
    var i = 0;
    var html = '';
    while(i < url.length){
        html += '<img src="'+url[i]+'" />';
        console.log(url);
        i++;
    }
    if(url.length > 0){
        $('#img').fadeIn();
        $('#img').html(html);
    } else {
        $('#img').fadeOut();   
    }    
});

这只会获得第一张图片。这可能会变得更加复杂。您可以预览它找到的每个图像。多个图像等我没有测试过这个正则表达式是否只是我在网上找到的那个。

使用textarea显示预览onkey

1 个答案: