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>
我希望网格显示具有其他列详细信息的图像。
解决方案
您的服务器端代码似乎有点混乱。我不知道这是否是误解的结果,或者是多次不同的尝试使其发挥作用,或者是什么。但突出的是您将图像保存到服务器的磁盘和数据库中。我看不出两者都做的理由。通常将文件直接保存到磁盘效率更高,只需将路径和文件名写入数据库,以便稍后定位文件。
PS 另外我不明白为什么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" />
推荐阅读
- java - 在 Android Studio 中获取按钮以执行操作
- android - 更改 gaddle 的 appId 时奇怪的 Android 颜色行为
- elasticsearch - 如何在 Elasticsearch 中将 id 设置为文档的唯一值
- macos - 使用 com.apple.developer.driverkit.userclient-access 配置配置文件应该如何?
- javascript - 无法连接到 mongdb nodejs
- javascript - 根据另一个选择值更改选择内容
- apache-kafka - 无需 zookeeper 即可工作的 Kafka docker 映像
- jmeter - Jmeter - 非 HTTP 响应代码:在尝试为 1 个用户录制脚本时观察到 org.apache.http.conn.HttpHostConnectException
- sql - SQL Server - 将所有子父关系连接成一个字符串
- node.js - 在 Firebase 中按需下载文件