There are two problems I am facing.
Number one: After I upload images into two asp:Image controls using two FileUpload controls, the Images disappear when I type a values into Textboxes that have OnTextChanged event.
For example, I have textboxes that when I type into any textbox the value of the label linked to that textbox changes as I type. If I upload an Image using FileUpload control, the image will display in the Image control, but when I change the value of a DropDownList Control or change label value by typing into any Textbox, the image will disappear.
Number Two: FileUploader do not work If I already type into Textbox that has OnTextChanged event. If I first type into a Textbox to change a label value or change DropDownList item, then I later try to upload an image using FileUpload control, the Image will not display in the Image control, but the value will be in the FileUpload control. How can I make image remain even if a postback occurs on page, because I know that postback occurs when I use OnTextChanged event in a Textbox
Alternatively, I tried to use Javascript to change the label values from textbox, but It seemed not to work.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.container1 { margin-top: 5px; margin: 0 auto; }
.font { height: 375px; width: 250px; position: relative; border-radius: 10px; border: 1px solid #e6ebe0; background-color: #fff; margin-right: auto; margin-left: auto; }
.CompanyName { font-size: 16px; padding: 5px; text-align: center; line-height: normal; font-family: 'Graphik', sans-serif; }
#Image7 { position: relative; left: 5px; top: 0; line-height: normal; }
.type { font-size: 11pt; font-weight: 500; font-family: 'Graphik', sans-serif; text-align: center; margin-top: 5px; line-height: normal; }
.topport { height: 30%; width: 100%; position: relative; z-index: 5; border-top-left-radius: 10px; border-top-right-radius: 10px; line-height: normal; }
.topport img { height: 100px; width: 100px; border-radius: 10px; position: absolute; top: 80px; left: 75px; }
.bottom { height: 70%; width: 100%; background-color: transparent; position: absolute; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.bottom p { position: relative; top: 85px; text-align: center; text-transform: capitalize; font-size: 9pt; line-height: normal; color: #000; }
.bottom design { font-size: 9pt; font-weight: 500; color: #000; }
.badgeID { font-size: 9pt; color: #000; }
#Image8 { height: 70px; width: 70px; }
.holdersign { text-align: left; position: relative; top: 80px; float: left; left: 5px; bottom: 5px; }
#Image9 { height: 40px; width: 50px; }
.holdersign img { width: 50px; margin: 5px; float: left; position: relative; left: 5px; }
.holdersign .sign { font-size: 9pt; padding: 5px; }
</style>
</head>
<body>
<asp:ScriptManager ID="scriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="row col-sm-12" runat="server" style="width: 100%; margin: 0 auto; margin-bottom: 0%;">
<div class="col-sm-7" style="width: 100%; margin: 0 auto; margin-right: auto; margin-left: auto;">
<div class="container" runat="server">
<div class="padding">
<div class="col-sm-6" runat="server" style="width: 100%; margin: 0 auto; padding: 10px;">
<asp:Panel Class="print-contents" ID="Panel1" runat="server">
<asp:HiddenField ID="hffont" runat="server" />
<div class="font" runat="server" id="font" style="margin-right: auto; margin-left: auto;">
<div class="topport">
<div class="CompanyName">
<asp:Image runat="server" ID="Image7" CssClass="logo" AlternateText="logo" Height="28" Width="30" />
<asp:Label ID="lblName" runat="server" Text=""></asp:Label>
</div>
<div class="type">
<asp:Label ID="typelbl" runat="server" Text=""></asp:Label>
</div>
<asp:Image ID="Image8" runat="server" CssClass="img" />
</div>
<div class="bottom">
<p>
<b>
<asp:Label runat="server" ID="NameText" Text="Victor Charles Tony"></asp:Label></b>
</p>
<p class="design">
<asp:Label runat="server" ID="Position" Text="Managing Director"></asp:Label>
</p>
<p><b>ID Number</b></p>
<p class="badgeID">
<asp:Label runat="server" ID="IDC" Text="098766"></asp:Label>
</p>
<div class="holdersign">
<asp:Image AlternateText="sign" ID="Image9" runat="server" Height="30" />
<br />
<label class="sign">holder</label>
</div>
</div>
</div>
</asp:Panel>
</div>
</div>
</div>
</div>
<div class="col-sm-5" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-left: 0.2px solid #f0f1f2; background-color: #fff; border-top: none; min-height: 100vh;">
<div class="input-group" style="font-size: 10pt; margin-top: 3%;">
<asp:Label ID="Cardorientation" runat="server" Text="" Height="0px" Width="0px"></asp:Label>
<asp:TextBox ID="TextType" runat="server" CssClass="form-control" placeholder="Name" AutoPostBack="true" OnTextChanged="TextType_TextChanged" onkeypress="GetValue(this.newtype)" />
</div>
<div style="margin-top: 1%; margin-bottom: 2%;">
<asp:Label ID="Label1" runat="server">Details</asp:Label>
</div>
<hr />
<asp:Label ID="Label17" runat="server" Style="color: #999;">Image</asp:Label>
<br />
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<asp:Label ID="Label18" runat="server" Style="color: #999;">Signature</asp:Label>
<br />
<asp:FileUpload ID="FileUpload2" runat="server" />
<br />
<asp:Label ID="Label2" runat="server" Style="color: #999;">Name</asp:Label>
<div class="input-group" style="font-size: 10pt; margin-top: 2%;">
<asp:TextBox ID="Textname" runat="server" CssClass="form-control" AutoCompleteType="None" placeholder="Name" OnTextChanged="Textname_TextChanged" AutoPostBack="true" onkeypress="GetValue(this.newname)" />
</div>
<asp:Label ID="Label6" runat="server" Style="color: #999;">Status</asp:Label>
<div class="input-group" style="margin-top: 3%; font-size: 10pt;">
<asp:TextBox ID="TitleText" runat="server" AutoCompleteType="None" CssClass="form-control" placeholder="e.g Marketing Manager" OnTextChanged="TitleText_TextChanged" AutoPostBack="true" onkeypress="GetValue(this.title)" />
</div>
<asp:Label ID="Label8" runat="server" Style="color: #999;">ID Number</asp:Label>
<div class="input-group" style="font-size: 10pt; margin-top: 2%;">
<asp:TextBox ID="TextID" runat="server" AutoCompleteType="None" CssClass="form-control" placeholder="e.g 04417" OnTextChanged="TextID_TextChanged" AutoPostBack="true" onkeypress="GetValue(this.id)" />
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script type="text/javascript">
function GetValue(newtype) {
document.getElementById('typelbl').innerHTML = document.getElementById('TextType').value;
}
function GetValue(newtype) {
document.getElementById('lbltype').innerHTML = document.getElementById('TextType').value;
}
function GetValue(newname) {
document.getElementById('NameText').innerHTML = document.getElementById('Textname').value;
}
function GetValue(title) {
document.getElementById('Position').innerHTML = document.getElementById('TitleText').value;
}
function GetValue(id) {
document.getElementById('IDC').innerHTML = document.getElementById('TextID').value;
}
function GetValue(address) {
document.getElementById('addrss').innerHTML = document.getElementById('OrgAddress').value;
}
function GetValue(newname) {
document.getElementById('LandName').innerHTML = document.getElementById('Textname').value;
}
function GetValue(title) {
document.getElementById('LandPost').innerHTML = document.getElementById('TitleText').value;
}
function GetValue(id) {
document.getElementById('LandID').innerHTML = document.getElementById('TextID').value;
}
function GetValue(address) {
document.getElementById('LandAddress').innerHTML = document.getElementById('OrgAddress').value;
}
</script>
<script type="text/javascript">
$(function () {
var fileUpload1 = $("[id*=FileUpload1]");
var img1 = $("[id*=Image8]");
img1.click(function () { fileUpload1.click(); });
fileUpload1.change(function () {
var reader = new FileReader();
reader.onload = function (e) {
$("[id*=Image8]").attr("src", e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
});
var fileUpload2 = $("[id*=FileUpload2]");
var img2 = $("[id*=Image9]");
img2.click(function () { fileUpload2.click(); });
fileUpload2.change(function () {
var reader = new FileReader();
reader.onload = function (e) {
$("[id*=Image9]").attr("src", e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
});
});
</script>
</body>
</html>
C#
protected void TextType_TextChanged(object sender, EventArgs e)
{
typelbl.Text = Server.HtmlEncode(TextType.Text);
}
protected void Textname_TextChanged(object sender, EventArgs e)
{
NameText.Text = Server.HtmlEncode(Textname.Text);
}
protected void TitleText_TextChanged(object sender, EventArgs e)
{
Position.Text = Server.HtmlEncode(TitleText.Text);
}
protected void TextID_TextChanged(object sender, EventArgs e)
{
IDC.Text = Server.HtmlEncode(TextID.Text);
}
