Ajax Image Asp example
1st we need a source to return a requested img, i'll use an ASP page like this (ASPX part doesnt matter, u may not touch it), lets call it ReturnPic.aspx
protected void Page_Load(object sender, EventArgs e)
{
System.Drawing.Image img = System.Drawing.Image.FromFile( Request.QueryString["file"].ToString());
//u have to use the system.drawing or ull get the we.ui.image string ext = Path.GetExtension(Request.QueryString["file"].ToString());
if (ext == "jpg")
ext = "jpeg";
*MemoryStream ms = new MemoryStream();
img.Save(ms, System.Drawing.Imaging.
ImageFormat.Jpeg);
ms.Close();
byte[] content = ms.ToArray();
Response.ContentType = "image/" + ext;
Response.BinaryWrite(content);
}
u can always use ImageConverter
http://www.vcskicks.com/image-to-byte.php
now here is my default page, i used 2 method to return the pic by ajax, one with UpdatePanel and the other with WebMethod both explained in my post:
http://bresleveloper.blogspot.com/2012/04/ajax-3-simle-ways.html
o/c the ddl was filled in the pageLoad
<script type="text/javascript">
function ChangeSource(times){
var e = document.getElementById("ddlImg");
var num = 0;
num = num + e.options[e.selectedIndex].value;
PageMethods.ChangeSource(num, ChangeSourceComplete);
}function ChangeSourceComplete(result){
var div = document.getElementById("img2");
div.src = result;
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods="true" > --->>> if ur planing use the webmethod
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="Button" ID="btnChangeImg"
onclick="btnChangeImg_Click" /> <br />
<img id="img1" alt="" src="" runat="server"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:DropDownList ID="ddlImg" runat="server">
</asp:DropDownList><br />
<input id="Button1" type="button" value="button"
onclick="ChangeSource();" /><br />
<img id="img2" alt="" src="" />
</div>
</form>
</body>
</html>
CS:
for the UpdatePanel Btn:
protected void btnChangeImg_Click(object sender, EventArgs e)
{
Random rnd = new Random();
int r = rnd.Next(3);
string file = "";
switch (r)
{
case 0: file = @"H:\My Pictures\white-light1.jpg"; break;
case 1: file = @"H:\My " +
Pictures\p4788853bb1286d6947587e8ec3b6090f2181898.gif"; break;
case 2: file = @"H:\My Pictures\have-a-nice-day.jpg"; break;
default: break;
}
img1.Src = "ReturnPic.aspx?file=" + file;
}
for the lower part and its JS code u need
[WebMethod]
public static string ChangeSource(int num)
{
string file = "";
switch (num)
{
case 0: file = @"H:\My Pictures\white-light1.jpg"; break;
case 1: file = @"H:\My " +
Pictures\p4788853bb1286d6947587e8ec3b6090f2181898.gif"; break;
case 2: file = @"H:\My Pictures\have-a-nice-day.jpg"; break;
default: break;
} return "ReturnPic.aspx?file=" + file;
}
just try it - its cool
protected void Page_Load(object sender, EventArgs e)
{
System.Drawing.Image img = System.Drawing.Image.FromFile( Request.QueryString["file"].ToString());
//u have to use the system.drawing or ull get the we.ui.image string ext = Path.GetExtension(Request.QueryString["file"].ToString());
if (ext == "jpg")
ext = "jpeg";
*MemoryStream ms = new MemoryStream();
img.Save(ms, System.Drawing.Imaging.
ImageFormat.Jpeg);
ms.Close();
byte[] content = ms.ToArray();
Response.ContentType = "image/" + ext;
Response.BinaryWrite(content);
}
u can always use ImageConverter
http://www.vcskicks.com/image-to-byte.php
now here is my default page, i used 2 method to return the pic by ajax, one with UpdatePanel and the other with WebMethod both explained in my post:
http://bresleveloper.blogspot.com/2012/04/ajax-3-simle-ways.html
o/c the ddl was filled in the pageLoad
<script type="text/javascript">
function ChangeSource(times){
var e = document.getElementById("ddlImg");
var num = 0;
num = num + e.options[e.selectedIndex].value;
PageMethods.ChangeSource(num, ChangeSourceComplete);
}function ChangeSourceComplete(result){
var div = document.getElementById("img2");
div.src = result;
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods="true" > --->>> if ur planing use the webmethod
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="Button" ID="btnChangeImg"
onclick="btnChangeImg_Click" /> <br />
<img id="img1" alt="" src="" runat="server"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:DropDownList ID="ddlImg" runat="server">
</asp:DropDownList><br />
<input id="Button1" type="button" value="button"
onclick="ChangeSource();" /><br />
<img id="img2" alt="" src="" />
</div>
</form>
</body>
</html>
CS:
for the UpdatePanel Btn:
protected void btnChangeImg_Click(object sender, EventArgs e)
{
Random rnd = new Random();
int r = rnd.Next(3);
string file = "";
switch (r)
{
case 0: file = @"H:\My Pictures\white-light1.jpg"; break;
case 1: file = @"H:\My " +
Pictures\p4788853bb1286d6947587e8ec3b6090f2181898.gif"; break;
case 2: file = @"H:\My Pictures\have-a-nice-day.jpg"; break;
default: break;
}
img1.Src = "ReturnPic.aspx?file=" + file;
}
for the lower part and its JS code u need
[WebMethod]
public static string ChangeSource(int num)
{
string file = "";
switch (num)
{
case 0: file = @"H:\My Pictures\white-light1.jpg"; break;
case 1: file = @"H:\My " +
Pictures\p4788853bb1286d6947587e8ec3b6090f2181898.gif"; break;
case 2: file = @"H:\My Pictures\have-a-nice-day.jpg"; break;
default: break;
} return "ReturnPic.aspx?file=" + file;
}
just try it - its cool
Comments
Post a Comment