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

Comments

Popular posts from this blog

OverTheWire[.com] Natas Walkthrough - JUST HINT, NO SPOILERS

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem

Asp.Net Ending Response options, Response.End() vs CompleteRequest()