Introduction:
Here I will explain how to use jQuery to show image preview with url entered in textbox with example or jQuery show image preview from input textbox with examples or jQuery load image in div from url obtained from textbox. By using jQuery “attr” property we can show image preview with the url entered from textbox.
Description:
In previous articles I explained jQuery preview image before upload using fileupload, jQuery show larger image preview on hover in asp.net, jQuery show loading image on button click with example, jQuery display text over image on hover using content hover plugin and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to show image preview with the url entered in textbox in jQuery with example.
In previous articles I explained jQuery preview image before upload using fileupload, jQuery show larger image preview on hover in asp.net, jQuery show loading image on button click with example, jQuery display text over image on hover using content hover plugin and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to show image preview with the url entered in textbox in jQuery with example.
Syntax
to Show Image Preview with URL in jQuery
Following is the syntax of showing image preview with the
url entered in textbox.
|
<script type="text/javascript">
$(function(){
$('#txtimgurl').change(function () {
$('#imgurlhead').hide();
$('#uimgurl').attr('src', $('#txtimgurl').val())
})
})
</script>
|
If you
want full code to show image preview with the url entered in textbox in jQuery
write the code like as shown below
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Image preview with Url entered in textbox</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$('#txtimgurl').change(function () {
$('#imgurlhead').hide();
$('#uimgurl').attr('src', $('#txtimgurl').val())
})
})
</script>
</head>
<body>
<form id="form1">
<div>
Enter Image Url: <input type="text" id="txtimgurl" style="" />
<hr />
<img id="uimgurl"
/>
</div>
</form>
</body>
</html>
|
Live
Demo
To see live the demo, enter image url in textbox and come
out of the textbox it will show image preview with url.
|
Enter Image Url: |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.