从文本框的jQuery图像预览

Question

我有Type="text"的此输入框，可从file manager中选择图片。

HTML：

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

从文件管理器中选择Image后我有这个输出：

现在我需要使用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;
})

Demo