Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Show Image Preview with Url Entered in Textbox Example

Jun 14, 2016
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 jQueryattr” 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.

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 RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.