How to Retrieve Binary image from db to view through Ajax call

Question

I want to show the picture in the preview after I click on edit button, but it gets a picture in binary form in the list and then passes it to ajax call through Json result after that it did not convert under ajax call.can anyone help me to sort out this problem.thanks

JS

function Edit(id) {        
    $("#submit").html("Update  Record");
    $.ajax({
        type: 'GET',
        url: '/Home/EditUser', 
        data: { userid:id},
        success: function (data) {                
            var obj = JSON.parse(data);
            $("#imgPreview").show();
            $("#imageBrowes:file").html(obj.Image_ID);
            $("#targetImg").attr('src', "data:image/gif;base64,{0}", obj.ImageTbl.ImageByte);
            $("#CId").val(obj.Content_ID);
            $("#title").val(obj.Title);
            $("#desc").val(obj.Description);
            $("#type option:selected").text(obj.TypeTbl.Name);
            $("#type option:selected").val(obj.Type_ID);
            $("#fromdate").val(obj.DateFrom);
            $("#todate").val(obj.DateTo);
        },
        failure: function (responce) {
            alert.responce("Record not Found");
        }
    });
}

Controller

public ActionResult EditUser(int userid)
{
    ContentTbl model = db.ContentTbls.Where(x => x.Content_ID == userid).SingleOrDefault();
    var editimg = model.Image_ID;
    TempData["eimageid"] = editimg;
    string value = string.Empty;
    value = JsonConvert.SerializeObject(model, Formatting.Indented, new JsonSerializerSettings
    {
        ReferenceLoopHandling = ReferenceLoopHandling.Ignore
    });
    JsonResult json = Json(value, JsonRequestBehavior.AllowGet);
    json.MaxJsonLength = int.MaxValue;    
    return json;      
}

View

<div id="imgPreview" class="thumbnail" style="display:none">
    <img class="img-responsive" id="targetImg" />
    <div class="caption">
        <span id="description"></span>
    </div>
    <a href="#" class="btn btn-danger" onclick="ClearPreview()"><iclass="glyphicon glyphicon-trash">Clear</i></a>
</div>

Convert image to byte array and the convert to base64 string — user1599615
– user1599615, Commented Mar 30, 2018 at 8:38

Sanyami Vaidya · Accepted Answer · 2018-03-30 13:01:36Z

1

try this,

Controller:

string path = Path.Combine(Server.MapPath("~/Image"),Model.FileName);
using (var ms = new System.IO.MemoryStream(bytes))
{
     using (var img = Image.FromStream(ms, false, true)) 
     {
        img.Save(path);
     }
}

In view page give src of the image when you save the image.

answered Mar 30, 2018 at 13:01

Sanyami Vaidya

8095 silver badges21 bronze badges

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

Comments

user1599615 · Accepted Answer · 2018-03-30 08:42:57Z

0

Convert raw image to byte array and then to ToBase64String

  Convert.ToBase64String(obj.ImageTbl.ImageByte.ToArray());

answered Mar 30, 2018 at 8:42

user1599615

2 Comments

Zahid Qamar ZQ Over a year ago

thnks bro for your comment but it does not work under ajax cal. i got this error " Uncaught ReferenceError: Convert is not defined "

user1599615 Over a year ago

You have to use it on server side, not in ajax

Collectives™ on Stack Overflow

How to Retrieve Binary image from db to view through Ajax call

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related