如何使用 ASP.NET MVC 5 在我的表单中以编辑模式取回上传的图像？

Question

我已经创建了一个表单，我正在使用表单提交在我的数据库中插入一些数据和图像...但是当我在编辑模式下打开时，除了图像之外，所有插入的数据都可以在输入字段中使用？ 我该如何解决？

---

看法：

@model User_Management_System_V2._0.Models.Product
@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
@using (Html.BeginForm("Edit","Products",FormMethod.Post , new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Product</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @*<div class="form-group">
        @Html.LabelFor(model => model.ProductID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ProductID, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ProductID, "", new { @class = "text-danger" })
        </div>
    </div>*@
    @Html.HiddenFor(model => model.ProductName)
    <div class="form-group">
        @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.PriceExpected, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.PriceExpected, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.PriceExpected, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.OldTime, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.OldTime, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.OldTime, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Status, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Photo, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
           <input type="file" name="file"/>
            @Html.ValidationMessageFor(model => model.Photo, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>


  </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

---

控制器：

public ActionResult Edit(string id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Product product = db.Products.Find(id);
    if (product == null)
    {
        return HttpNotFound();
    }
    return View(product);
}

---

创建动作

 public ActionResult Create()
    {

        return View();
    }


    [HttpPost]

    public ActionResult Create([Bind(Include = "ProductName,Description,PriceExpected,OldTime,Status,Photo")]Product product,HttpPostedFileBase file)
    {          
            if (file != null)
            {
                product.Photo = new byte[file.ContentLength];
                file.InputStream.Read(product.Photo, 0, file.ContentLength);



            }
            else
            {
                ModelState.AddModelError("", "Please Select image");
            }

            db.Products.Add(product);
            db.SaveChanges();



        return RedirectToAction("Index");

    }

我的主要问题是所有字段都在编辑模式下打开，这意味着它们在编辑模式下打开，在其字段中预插入数据值，但图像没有预插入值。

Answer 1

在 jquery 和纯 Javascript 中尝试以下解决方案，您只需要检索您上传的图像的字节数组及其扩展名，然后只需为您的图像控件提供生成的 src 我希望它有帮助

 var PhotoArr = []; //array of bytes from the server
var PhotoExt = "jpg";//example
if (PhotoArr) {
    var byteArray = new Uint8Array(oldResume.PhotoArr);
    var blob = new Blob([byteArray], { type: 'application/' + PhotoExt });
    var image = $('#yourImageId');
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL(blob);

    image.attr('src', imageUrl);

}