jQuery Image Preview From Text Box

Question

I have This Input Box With Type="text" for choose image from file manager.

HTML:

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

After choose Image From file manager I have This ouput:

enter image description here

Now I need to create image preview from this text box and url using Html and Jquery Or Bootstrap Popover.

How can I do this?

If this is a text input, how do you choose files from the file manager? How do you open it without type=file? — Al.G., May 31 '14 at 13:58
Is it possible? Why don't you just use `type=file`? Then the linked answer will be helpful. — Al.G., May 31 '14 at 14:00

score 0 · Answer 1 · answered May 31 '14 at 14:15

Not sure how you enter the image in the input, but try this.

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

jQuery Image Preview From Text Box

1 Answers1