Getting System.Byte[] from SQL 08 and displaying it as image in HTML using jQuery

Question

Im having System.Byte[] in SQL 08. i have to convert System.Byte[] into image and to display that image in <img> tag in html. im using jquery to get image from mvc and to display it in html.

Im not using View(V) instead of that im using HTML.

MVC 3 Controller

public ActionResult Get_Leave_IO_Pic(DetailsModel model)  
      {
        TCSServiceReference.MBLServiceSoapClient TCSClient = new TCSServiceReference.MBLServiceSoapClient();
        DataSet ds = new DataSet();
        DataSet resultds = TCSClient.Get_Employee_Details_Srno(ds, model.EMPSRNO);
        Image strJSON = null;
        if (resultds.Tables[0] != null && resultds.Tables[0].Rows != null)
        {
            byte[] byteArrayIn = (byte[])resultds.Tables[0].Rows[0]["EMPPHOT"];
            MemoryStream ms = new MemoryStream(byteArrayIn);
            Image returnImage = Image.FromStream(ms);
            strJSON = returnImage;
        }
        return Json(new { result = strJSON });
    }

HTML

 <img src="../images/bis_user.png" width="113" height="104" border="0" alt="" id="ImageStaff" />

jQuery

function GetLeaveIOPic(empsrno) {
   $.post("http://Details/Get_Leave_IO_Pic",
    {
        EMPSRNO: empsrno
    },
    function (data) {
        $.each(data, function (key, value) {
            $('#ImageStaff').val(); //How to get image here?
        });
    }, 'json' );
}

Darin Dimitrov · Accepted Answer · 2012-04-23 09:29:05Z

1

im using jquery to get image from mvc and to display it in html.

You don't really need javascript to achieve that. You could have your controller action directly return the image contents in the response and set the proper content type:

public ActionResult Get_Leave_IO_Pic(string id)  
{
    var TCSClient = new TCSServiceReference.MBLServiceSoapClient();
    var ds = new DataSet();
    var resultds = TCSClient.Get_Employee_Details_Srno(ds, id);
    if (resultds.Tables[0] != null && resultds.Tables[0].Rows != null)
    {
        byte[] byteArrayIn = (byte[])resultds.Tables[0].Rows[0]["EMPPHOT"];

        // TODO: adjust the image MIME type based on what you have stored
        // in your database
        return File(byteArrayIn, "image/jpeg");
    }

    return HttpNotFound();
}

and in the view simply point the <img> tag to this controller action by passing the id that allows to retrieve the image from the database:

<img src="@Url.Action("Get_Leave_IO_Pic", new { id = "123" })" width="113" height="104" border="0" alt="" id="ImageStaff" />

answered Apr 23, 2012 at 9:29

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lakshmana Kumar Over a year ago

Im not using view, instead of that im using HTML. And i have to return the value in strJSON only. Thank you.

Lakshmana Kumar · Accepted Answer · 2013-05-11 11:45:08Z

Finally i got solution for this.

` ======================================= MVC 3 Controller

public ActionResult Get_Leave_IO_Pic(DetailsModel model)
    {
       TCSServiceReference.MBLServiceSoapClient TCSClient = new TCSServiceReference.MBLServiceSoapClient();
        DataSet ds = new DataSet();
        DataSet resultds = TCSClient.Get_Employee_Details_Srno(ds, model.EMPSRNO);
        string strJSON = "Failed";
        if (resultds.Tables[0] != null && resultds.Tables[0].Rows.Count > 0)
        {
            byte[] byteArrayIn = (byte[])resultds.Tables[0].Rows[0]["EMPPHOT"];
            string EmpName = resultds.Tables[0].Rows[0]["EMPNAME"].ToString();
            MemoryStream ms = new MemoryStream(byteArrayIn);
            Image gotimage = Image.FromStream(ms);
            string filepath = (System.Configuration.ConfigurationManager.AppSettings.Get("ImageUpload")).ToString(); 
            //filepath = E:/Project/project1/Project1 MVC/Images/
            gotimage.Save(filepath + EmpName + " - " + model.EMPSRNO + ".png");
            strJSON = System.Configuration.ConfigurationManager.AppSettings.Get("ImageURL").ToString() + EmpName + " - " + model.EMPSRNO + ".png";
            //ImageURL = http://localhost:8085/Project1MVC/Images/
        }
        return Json(new { result = strJSON });
    }

` ======================================= HTML

 <img src="../images/bis_user.png" width="113" height="104" border="0" alt="" id="ImageStaff" />

` ======================================= jQuery

function GetLeaveIOPic(empsrno) {
        $.post("http://localhost:8085/Project1MVC/Details/Get_Leave_IO_Pic",
    {
        EMPSRNO: empsrno
    },
    function (data) {
        $.each(data, function (key, value) {
            if (!(data.result == 'Failed')) {
                // data.result = http://localhost:8085/Project1MVC/Images/name - 23.png
                $('#ImageStaff').attr('src', data.result.toString());
            }
        });
    },
  'json'
 );
    }

Collectives™ on Stack Overflow

Getting System.Byte[] from SQL 08 and displaying it as image in HTML using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related