I have created a web form with an image uploader. It shows a preview of the image before upload. This is how it looks.
The problem is, it becomes a mess when the screen size changes.
This is the design of the page.
<%@ Page Title="" Language="C#" MasterPageFile="~/Presentation/Site.Master" AutoEventWireup="true" CodeBehind="PatientRegister.aspx.cs" Inherits="HealthCare.Presentation.PatientRegister" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="head">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#<%=Image1.ClientID%>').prop('src', e.target.result)
}
reader.readAsDataURL(input.files[0]);
}
}
$("#fuProfilePic").change(function () {
readURL(this);
});
function myFunction(input) {
alert(this);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: Title %></h2>
<div class="alert alert-danger fade in" role="alert" id="divError" runat="server" visible="false">
<a class="close" data-dismiss="alert" aria-label="close">×</a>
<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
</div>
<div class="alert alert-success fade in" role="alert" id="divSuccess" runat="server" visible="false">
<a class="close" data-dismiss="alert" aria-label="close">×</a>
<asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
</div>
<div class="form-group row" style="height:40px">
<asp:Label runat="server" CssClass="col-md-2 control-label">Name</asp:Label>
<div class="col-md-6">
<asp:TextBox runat="server" ID="txtName" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtName" CssClass="text-danger errorMsg" ErrorMessage="Please enter the name" />
</div>
<div class="col-md-4" style="max-width:150px;max-height:150px">
<asp:Image ID="Image1" runat="server" Height="150px" Width="150px" ImageUrl="~/Images/profilePicIcon.png" />
</div>
</div>
<div class="form-group row" style="height:40px">
<asp:Label runat="server" CssClass="col-md-2 control-label">Address</asp:Label>
<div class="col-md-6" >
<asp:TextBox runat="server" ID="txtAddress" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtAddress"
CssClass="text-danger errorMsg" ErrorMessage="Please enter the address" />
</div>
</div>
<div class="form-group row " style="height:40px">
<asp:Label runat="server" CssClass="col-md-2 control-label">Date Of Birth</asp:Label>
<div class="col-md-2">
<asp:TextBox runat="server" ID="txtDOB" CssClass="form-control" MaxLength="10" TextMode="Date" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtDOB"
CssClass="text-danger errorMsg" ErrorMessage="Please enter the DOB" />
<ajaxToolkit:CalendarExtender ID="txtFromDate_CalendarExtender" runat="server" Enabled="True" TargetControlID="txtDOB"
PopupButtonID="CalenderImageIDHere" Format="yyyy-MM-dd" />
</div>
</div>
<div class="form-group row" style="height:40px">
<asp:Label runat="server" CssClass="col-md-2 control-label">Mobile</asp:Label>
<div class="col-md-2">
<asp:TextBox runat="server" ID="txtMobile" CssClass="form-control" MaxLength="10" onkeypress="return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)"/>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtMobile"
CssClass="text-danger errorMsg" ErrorMessage="Please enter the mobile no." />
</div>
</div>
<div class="form-group row" style="height:40px">
<asp:Label runat="server" CssClass="col-md-2 control-label">Phone</asp:Label>
<div class="col-md-2">
<asp:TextBox runat="server" ID="txtPhone" CssClass="form-control" MaxLength="10" onkeypress="return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)"/>
</div>
</div>
<div class="form-group row" style="height:40px">
<asp:Label runat="server" CssClass="col-md-2 control-label">Height</asp:Label>
<div class="col-md-2">
<asp:TextBox runat="server" ID="txtHeight" CssClass="form-control" TextMode="Number" />
</div>
</div>
<div class="form-group row" style="height:40px">
<asp:Label runat="server" CssClass="col-md-2 control-label">Weight</asp:Label>
<div class="col-md-2">
<asp:TextBox runat="server" ID="txtWeight" CssClass="form-control" TextMode="Number" />
</div>
</div>
<div class="form-group row">
<asp:Label runat="server" CssClass="col-md-2 control-label">Profile Picture</asp:Label>
<div class="col-md-6">
<asp:FileUpload ID="fuProfilePic" runat="server" onchange="readURL(this)"/>
</div>
</div>
<div class="form-group row">
<div class="col-md-offset-2 col-md-8">
<asp:Button runat="server" Text="Save" CssClass="btn btn-default" ID="btnsave" OnClick="btnsave_Click" />
</div>
</div>
</asp:Content>
