顯示帶有文本區域的預覽onkey

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();   
    }    
});

這只會得到第一張圖像。 這可能變得更加復雜。 您可以使其預覽找到的每個圖像。 多張圖片，等等。我還沒有測試過這個正則表達式是否窮盡了，只是我在網上找到的一個。