How can get image with Jquery Ajax

Question

I can can get picture by Razor '@Action' but with Ajax Can't. I write in controller:

        public ActionResult getCommodityPic()
    {
        var f= File(Server.MapPath("~/App_Data/CommodityPics/eee/1") + ".jpg", "image/jpg");
        return  f;
    }

and in java script :

    $(document).ready(function () {
    ShowCommodities();
    getCommodityPic();
});
function getCommodityPic() {
    $.ajax({
        url: '@Url.action("getCommodityPic")',
        type: 'Get',
        dataType: 'image/jpg',
        success: function (Data, Status, jqXHR) {
            $('#img1').attr('src', Data);
        }
    });

Please note that the model-view-controller tag is for questions about the pattern. There is a specific tag for the ASP.NET-MVC implementation. — , Jul 02 '16 at 23:27
Return the path of the file and then `return Json(filePath, JsonRequestBehavior.AllowGet);` (you cannot return a file using ajax) — , Jul 02 '16 at 23:29

score 1 · Accepted Answer · answered Mar 02 '17 at 12:34

        $.ajax({
            url: '@Url.Action("DownloadPic", "MyController")',
            contentType: 'application/json; charset=utf-8',
            datatype: 'json',
            data: {
                id: Id
            },
            type: "GET",
            success: function (Data, Status, jqXHR) {
                if (Data != "") {
                    alert("Empty");
                    return;
                }
                window.location ='@Url.Action("DonloadPic","Mycontroller")';
            }
        });

in Controller:

    public ActionResult DownloadPic(int? id)
    {
        Lesson l = new Lesson();
        l = db.Lesson.Single(p => p.id == id);

        if (l.picture == null)
        {
            string targetFolder = System.Web.HttpContext.Current.Server.MapPath("~/Image/book-03.jpg");
            byte[] img = System.IO.File.ReadAllBytes(targetFolder);
            return File(img, "image/jpg");
        }
        return File(l.picture, "image/jpg");
    }

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

If you want to display the image dynamically, then try this. You may not need an Ajax call for this.

$('#img1').html('<img src="getCommodityPic" />')

If you want to process the image (read its raw binary) then this answer should help - https://stackoverflow.com/a/20048852/6352160

edited May 23 '17 at 10:29

Community

1
1

answered Jul 03 '16 at 00:37

Shankar

2,625
3
25
49

if I want to give parameter to getCommodityPic like getCommodityPic(5) what shoud I do – Seyed Reza Amerizadeh Jul 03 '16 at 08:03

How can get image with Jquery Ajax

2 Answers2