javascript - 来自文本框的 jQuery 图像预览

Question

我有这个带有 Type="text" 的输入框，用于从 文件管理器 中选择图像。

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

Demo