Javascript 如何在一个简单的网格中显示图像，而不是数据库中的web网格。以字节数组格式保存的图像

我正在使用ASP.NET MVC 4.0，我试图在一个简单的网格中显示图像，但网格显示为空白。图像以字节数组格式保存。我正在获取其他列的详细信息，但没有图像

以下是以字节数组格式保存图像并从数据库显示的完整控制器代码：-

public ActionResult Index()
{
    return View();
}

public ActionResult Savedata(HttpPostedFileBase Image)
{
    SaveImage obj = new SaveImage();
    string result;

    if (Image != null)
    {
        HttpPostedFileBase httpobj = Request.Files["Image"];
        string[] Imagename = httpobj.FileName.Split('.');
        obj.ImageName=Imagename[0];

        using (Stream inputStream = Request.Files[0].InputStream) //File Stream which is Uploaded  
        {
            MemoryStream memoryStream = inputStream as MemoryStream;
            if (memoryStream == null)
            {
                memoryStream = new MemoryStream();
                inputStream.CopyTo(memoryStream);
            }
            obj.ImagePic = memoryStream.ToArray();
        }  

        var path = Path.GetFileNameWithoutExtension(Image.FileName) + DateTime.Now.ToString("ddMMyyhhmmss") + Path.GetExtension(Image.FileName);
        result = path.Replace(" ", string.Empty);
        var serversavepath = Path.Combine(Server.MapPath("~/DemoImages/") + result);
        Image.SaveAs(serversavepath);                

        obj.ImageName= result;
        entity.SaveImages.Add(obj);
        entity.SaveChanges();                
    }

    //return View("Index");
    return Content("<script>alert('Data Successfully Submitted');location.href='../Home/Index';</script>"); 
}

public JsonResult BindGrid()
{            
    DataRow[] result;

    var output = (from c in entity.SaveImages.AsEnumerable()
                  select new
                  {
                      ID = c.Id,
                      ImageName = c.ImageName,
                      //ImagePic = c.ImagePic,
                      ImagePic = Convert.ToBase64String(c.ImagePic)                             

                  }).ToList();           

    var data = new { result = output };

    return Json(output, JsonRequestBehavior.AllowGet);
}

这是我的完整视图代码。我使用的是单一视图

<script type="text/javascript">

        $(function () {

            $.post("@Url.Content("~/Home/BindGrid")", null, function (data) { bindgrid(data); }, "Json");

        });


    </script>

    <script type="text/javascript">

        $(function save() {

            debugger;
            $("#btnSave").click(function () {

                location.href = '@Url.Action("Savedata", "Home")';

            });
        });


        function bindgrid(data) {

            var body = "";
            $("#Grid tbody").empty();
            $.each(data.result, function (key, value) {

                body += "<tr><td> " + value.ID + "</td>" +

                "<td>" + value.ImageName + "</td>" +
                  "<td>" + value.ImagePic + "</td>" +

            "<td>  <a style='cursor:pointer' onclick=Edit(" + value.Id + ");>Edit</a> <a style='cursor:pointer' onclick=Delete(" + value.Id + ");>Delete</a></td></tr>";

            });
            $("#Grid tbody").append(body);
        }

    </script>
    <div>
        @using (Html.BeginForm("Savedata", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {       

            <div>  
                <table>
                    <tr>
                        <td>
                            Upload Image
                        </td>

                        <td><input type="file" name="Image" id="Image" style="width:100%" /></td>

                    </tr>
                </table>      

            </div>
            <br/>

            <div>
                <input type="submit" value="save" id="btnSave" />
            </div>
        }
        <div id="list" style="width: 997px; margin-right: 0px;">
            <table id="Grid">
                <thead>
                    <tr>
                        <th>
                            ID
                        </th>

                        <th>
                            IMAGE NAME
                        </th>
                        <th>
                            IMAGES
                        </th>
                        <th>
                            ACTION
                        </th>

                    </tr>

                </thead>
                <tbody>

                    @foreach (var item in entity.SaveImages)
                    {                       
                        <tr>
                            <td>@item.Id</td>
                            <td>@item.ImageName</td>
                            <td><img src="~/DemoImages/@item.ImagePic" width="100" height="100" /></td>    
                            @*<td><img src="string.format("data:image/png;base64 {0}",base64data)"/></td>*@                        

                        </tr>
                    }

                </tbody>
            </table>
        </div>
    </div>
</body>

我希望网格显示包含其他列详细信息的图像。

您可以创建

---

您的服务器端代码似乎有点混乱。我不知道这是否是误解的结果，或者是多次尝试让它起作用，或者是什么。但最突出的是，您正在将映像保存到服务器的磁盘和数据库中。我看不出有什么理由两者兼而有之。通常情况下，将文件直接保存到磁盘，只需将路径和文件名写入数据库，就可以更高效地找到文件

另外，我也不明白为什么你有时会使用Request.Files[Image]；当文件已通过图像变量可用时。存储时从文件名中删除扩展名是很奇怪的，因为这样会丢失关于文件类型的信息，并且也不会存储MIME类型。您还尝试在不同的行上为obj.ImageName指定两个不同的值。这毫无意义

所以你真正需要的是这个，我想：

public ActionResult Savedata(HttpPostedFileBase Image)
{
    SaveImage obj = new SaveImage();
    string result;

    if (Image != null)
    {
        obj.ImageName = Image.FileName;

        string imageFolder = "~/DemoImages/";
        var path = Path.GetFileNameWithoutExtension(Image.FileName) + DateTime.Now.ToString("ddMMyyhhmmss") + Path.GetExtension(Image.FileName);
        result = path.Replace(" ", string.Empty);
        var serversavepath = Path.Combine(Server.MapPath(imageFolder) + result);
        Image.SaveAs(serversavepath);                

        obj.ImageName = imageFolder + result;
        entity.SaveImages.Add(obj);
        entity.SaveChanges();                
    }

    return Content("<script>alert('Data Successfully Submitted');location.href='../Home/Index';</script>"); 
}

然后在视图中，您只需要以下内容即可显示它，因为文件夹名称已在ImageName字段中，因此它是一个现成的相对URL：

<img src="@item.ImageName" width="100" height="100" />

---

我正在使用这个视图中的代码，正如您所说的，您的图像是在字节数组中。那么，如何使用相对路径进行绑定呢？检查我的回答我也尝试了这个方法，但仍然没有在网格上获取图像我在entity.SaveImages中尝试了这个代码@foreach var item{@item.Id@item.ImageName}我正在使用此代码将图像数据转换为base64字符串ImagePic=string.Formatdata:image/jpg；base64，{0}，Convert.ToBase64Stringc.ImagePic

public JsonResult BindGrid()
{            
    DataRow[] result;

    var output = (from c in entity.SaveImages.AsEnumerable()
      select new
      {
        ID = c.Id,
        ImageName = c.ImageName
      }).ToList();           

    var data = new { result = output };

    return Json(output, JsonRequestBehavior.AllowGet);
}

<img src="@item.ImageName" width="100" height="100" />