How to upload images/files and save to sql server using jquery in asp.net and vice versa

Question

I need help in uploading an image in jquery then afterwards sending it to server-side for its insertion to sql server and retrieving image from sql server then appending it to a div. Is there a way to do this from client-side to server-side and vice versa? I've read so many articles, but most of them are pure server-side. Can anyone give me an example? Any help will be fully appreciated.

Answer 1

For Async file upload see This article.

1) By this you would be able to get image bytes which you can save it to db or you can convert it to image and save it to directory.

2) Once you save the image you can get the bytes from the db, in your page you can use

<img id="img" src="GetImage.ashx?ImageId=1"/>

In GetImage.ashx you can write following code

//byte[] image = Get image bytes from DB using ImageID
System.Drawing.Image img = byteArrayToImage(image);

MemoryStream stream = new MemoryStream();
img.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
img.Dispose();
stream.Position = 0;
byte[] data = new byte[stream.Length];
stream.Read(data, 0, (int)stream.Length);
stream.Dispose();
Response.Clear();
Response.ContentType = "image/jpeg";
Response.BinaryWrite(data);

Byte conversion function

public Image byteArrayToImage(byte[] byteArrayIn)
{
  MemoryStream ms = new MemoryStream(byteArrayIn);
  Image returnImage = Image.FromStream(ms);
  return returnImage;
}