I have a file upload control in asp.net which is used to upload image file. Now what I want is I have image control so when a user uploads a file, The image from that file should be visible in the image control before it is really upload on the server. When ever user changes the file, the change should be reflected in that image control. I dont want to use any additional button other than file upload control.
Is there any way to do this with javascript??
I think thats possible in HTML5 supported browsers
check the HTML5 FILE API http://www.w3.org/TR/FileAPI/
This works in FF3+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input type=file & Firefox 3</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>This works in Firefox 3+</h1>
<script type="text/javascript">
// <![CDATA[
function inputFileOnChange() {
if (document.getElementById('fichier').files) {
$("#dvFileName").html(document.getElementById('fichier').files.item(0).name);
$("#imgImage").attr("src" ,document.getElementById('fichier').files.item(0).getAsDataURL());
};
};
// ]]>
</script>
<div>
<input type="file" name="fichier" id="fichier" onchange="inputFileOnChange();" />
<br /><br />
<img id="imgImage" src="" width="200" height="200" alt="" />
<div id="dvFileName">
</div>
</div>
</body>
</html>
Related
So I'm using a jQuery plug-in called Coin Slider. The slideshow seems to be working fine but I want to connect it with a database that I have created in the App_Date folder in Visual Studio 2010.
When clicked on a certain picture, I want the system to search the table in the database using the description of that particular image in the slideshow as a keyword. If the item exists in the database, it would go to the website mentioned in the href. Otherwise, it would display "item not found".
All I've done is make the slideshow.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="css/coin-slider/coin-slider.min.js" type="text/javascript"></script>
<link href="css/coin-slider/coin-slider-styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('#coin-slider').coinslider();
});
</script>
</head>
<body>
<div id='coin-slider'>
<a href="the first website goes here" target="_blank">
<img src='1.jpg' >
<span>
Description goes here
</span>
</a>
<a href="the second website goes here">
<img src='2.jpg' >
<span>
Description goes here
</span>
</a>
</div>
</body>
</html>
Any help would be appreciated.
I have this asp.net code in my page :
<div id="prx">ABC</div>
And I want to change the value "ABC" to something when for example the user type a value in TextBox.
How can I do that using Ajax ?
Thanks
You don't need AJAX to do this. You can simply use Javascript to update the content of the DIV tag with the contents of the INPUT widget. See How to set the value of a form element using Javascript.
Now if you'd like to update the TextBox with something from the server without reloading the page, then that's AJAX. I'd use jQuery.ajax() function over UpdatePanels though. Here's a jQuery AJAX Tutorial.
May be using javascript?)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication11.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function setDivContent() {
var textInput = document.getElementById('text1');
var divPrx = document.getElementById('prx');
divPrx.innerHTML = textInput.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button onclick="javascript:setDivContent(); return false;">Set</button>
</div>
</form>
</body>
</html>
Check out the ASP.NET AJAX UpdatePanel control. It lets you change text on a page and "AJAX-ifies" anything inside it, instead of doing a full postback. Here is a good tutorial on it.
I know this is old question.. but it might help someone
JQUERY for this would be :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(e){
e.preventDefault();
$("#prx").text($("#text1").val());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button type="button" id="btn1">Set</button>
</div>
</form>
</body>
</html>
I am using JQuery for the first time today. I can't make it to work (It simple doesnt show up). I want to display inline content using Thickbox (Eventually I will be displaying a PDF in an iframe). I have included all the javascript and css files etc. and referenced them as in code below.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQueryLearning._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="Scripts/thickbox.js" type="text/javascript"></script>
<script src="Scripts/thickbox-compressed.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<link href="App_Themes/Theme/Css/thickbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#TB_inline?height=50&width=300&inlineId=hiddenModalContent"
title="Simple Demo" class="thickbox">Show hidden content.</a>
<div id="hiddenModalContent" style="display: none;">
<div style="text-align: center;">
Hello ThickBox!</div>
</div>
</div>
</form>
</body>
</html>
Am I missing something?
Thanks,
Ali
I think you need to alter the sequence of the script files, otherwise they won't work properly:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/thickbox.js" type="text/javascript"></script>
<script src="Scripts/thickbox-compressed.js" type="text/javascript"></script>
<link href="App_Themes/Theme/Css/thickbox.css" rel="stylesheet" type="text/css" />
Also: Aren't "thickbox.js" and "thickbox-compressed.js" different compression formats of the same module? In that case, you can omit one of them. If you want to debug inside the js, you need "thickbox.js", otherwise "thickbox-compressed.js" is sufficient.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#date').datepicker();
});
</script>
</head>
<body>
<%--<form id="form1" runat="server">--%>
<div>
<input type="text" id="date" />
</div>
<%--</form>--%>
</body>
</html>
I've attached a datepicker to a text box and the first time I click it, it works a treat and populates the text box with the current date. It works fine in IE7 Comp mode, Chrome and Firefox. It works once or twice on IE8 but locks the browser up after that. One interesting note is the host operating system is Windows 2008 R2.
Any ideas?
It was a corrupt download that I had somehow grabbed from UI, all sorted.
I hope you can help me.
I have used on a localhost aspx page the following code so it autocompletes.
It works perfect.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>
*However, when I download the scripts etc and run it in my local server (see code below), it doesn't work and it doesn't give me any errors
The page does take approx 10 seconds to load (instead of <1 second)
The autocomplete function doesn't work on the page, but everything else does.
Can anyone tell me what I am doing wrong ? Is there something I have to additional turn on locally or download ?
I am quite new at this so thanks for your pacience.
Also, I would like the data to come from a file, instead of the variable data.
I have downloaded the file called "jquery-1.3.2.min.js" as well and put it in the same directory as the other scripts...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta content="es" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Search POL-POD</title>
<style type="text/css">
.tahoma_small {
font-family: Tahoma;
font-size: x-small;
}
</style>
<script src="../autocomplete/jquery-latest.js"></script>
<link rel="stylesheet" href="../autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="../autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function() {
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#txtfirst").autocomplete(data);
$("#txtsecond").autocomplete(data);
});
</script>
</head>
<body>
<form id="form1" runat="server" enableviewstate="False" autocomplete="True">
POL
<asp:TextBox id="txtfirst" runat="server"></asp:TextBox>
POD
<asp:TextBox id="txtsecond" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Button" />
<br />
....etc
First thing to do would be to include the file jquery-1.3.2.min.js into your document before any other script file that uses jquery, unless that's what jquery-latest.js is.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
You are not getting any javascript errors?
finally after a lot of testing/searching, I found a solution.
Thanks anyway for your help!
I took out the "../" on all the links:
So: <script src="../autocomplete/jquery.autocomplete.js"></script>
is now: <script src="autocomplete/jquery.autocomplete.js"></script>
So here is all the code (you need the .js and .css files mentioned inside the "autocomplete" directory in order to work)
I hope it helps someone !
By the way, I have a total of 1200 cities in the variable "cities" and the .aspx page is only 20Kb
I also tested using a .csv file to import the data, but it took several seconds to load...having the values within the .aspx page is lightning fast and the page is still quite small (obviously it is not a good idea if you have several thousand values)
...
</style>
<script src="autocomplete/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="autocomplete/jquery.autocomplete.js" type="text/javascript"></script>
<link href="autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function() {
// datavalues is the array containing all the options...the .split(","); at the end means each option is separated by a comma,
var cities= "Madrid,Paris, Barcelona,Rome,London".split(",");
$("#txtfromcity").autocomplete(cities);
$("#txttocity").autocomplete(cities);
});
</script>
</head>
<body>
<form id="form1" runat="server" enableviewstate="False" autocomplete="True">
POL
<asp:TextBox id="txtfromcity" runat="server"></asp:TextBox>
POD
<asp:TextBox id="txttocity" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Button" />
...
As mentioned, make sure the necessary JavaScript files are loaded. Since you're coding in ASP.NET, you might want to use ResolveUrl to make sure these files are referenced correctly, independent of the requested page's location.
<script src="<%# ResolveUrl("~/autocomplete/jquery-latest.js") %>" type="text/javascript"></script>
<script src="<%# ResolveUrl("~/autocomplete/jquery.autocomplete.js") %>" type="text/javascript"></script>