文本框中的jQuery圖像預覽

Question

我有Type="text"這個輸入框，用於從file manager選擇圖像。

HTML：

<input id="images" class="form-control" type="text" name="img">

從文件管理器中選擇圖像后，我有此輸出：

現在，我需要使用HTML和Jquery或Bootstrap Popover從此文本框和url創建圖像預覽。

我怎樣才能做到這一點？

Answer 1

不確定如何在輸入中輸入圖像，但是請嘗試此操作。

HTML：

<input id="images" class="form-control" type="text" name="img">
<div class="preview">
    <img src="" class="preview-image" alt="">
</div>

<a href="http://cdn2.business2community.com/wp-content/uploads/2013/04/google-.jpg">Add Image</a>

CSS：

.preview-image { display: none; height: auto; width: 200px; }

JS：

$('.form-control').on('change', function(){
    var inputVal = $(this).val();
    $('.preview-image').attr('src', inputVal).fadeIn();
})


$('a').on('click', function(){
    var href = $(this).attr('href');
    $('.form-control').val(href).trigger('change');
    return false;
})

演示