我正在使用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>
我希望网格显示带有其他列详细信息的图像。
答案 0 :(得分：0)
您的服务器端代码似乎有些混乱。我不知道这是误解的结果，还是尝试使其工作的多种尝试的结果，或者是什么。但是引人注目的是您将映像既保存到服务器磁盘，又保存到数据库。我看不出两者兼有的理由。通常，将文件直接保存到磁盘，然后仅将路径和文件名写入数据库，这样效率更高，因此可以在以后定位文件。
P.S。同样，我也无法理解为什么通过Request.Files["Image"];变量可以使用文件时有时会使用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>");
}
BindGrid方法将非常相似，只是没有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);
}
然后在视图中，只需要显示以下内容（因为文件夹名称已经在ImageName字段中，因此它是现成的相对URL）：
<img src="@item.ImageName" width="100" height="100" />
答案 1 :(得分：-1)
您可以在td内创建<img>标签，并将base64字符串设置为src属性。
<tbody>
@foreach (var item in entity.SaveImages)
{
<tr>
<td>@item.Id</td>
<td>@item.ImageName</td>
<td><img src="'data:image/jpg;base64,' + @item.ImagePic" width="100" height="100" /></td>
</tr>
}
</tbody>