Question

我想在 Edit.cshtml 页面中编辑我上传的图片，但是当我点击我的编辑操作时，我的员工表单中存在所有数据，但没有图像文件然后我无法更改我的如有必要，请提供图片。

我正在使用SQL Server数据库并仅在数据库中保存图像路径。

这是我的代码

员工模型

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Web;

namespace MVC_Login_Registration.Models
{
    public class EmployeeInfo
    {
        //Others Properties

        public string Image { get; set; }      

    }
}

员工控制器

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using MVC_Login_Registration.Models;
  using System.Data.Entity;
  using System.Net;
  using System.Data.Entity.Infrastructure;
  using System.IO;
  using System.Threading.Tasks;

  namespace MVC_Login_Registration.Controllers
  {
      public class EmployeeController : Controller
      {
          UserDbContext edb = new UserDbContext();

          public ActionResult Index() => View(edb.employeeinfo.ToList());


          public ActionResult Create() => View();


          [HttpPost]

          public ActionResult Create(EmployeeInfo empinfo, HttpPostedFileBase image)
          {
              empinfo.Image = System.IO.Path.GetFileName(image.FileName);


              if (ModelState.IsValid)
              {
                  edb.employeeinfo.Add(empinfo);
                  edb.SaveChanges();
                  image.SaveAs("C:/EmployeeImage/" + empinfo.EmployeeID.ToString() + empinfo.Image);
                  image.SaveAs(Server.MapPath(Url.Content("~/EmployeeImage/" + empinfo.EmployeeID.ToString() + empinfo.Image)));
                  return RedirectToAction("Index");
                  //ModelState.Clear();               
                  //ViewBag.Message = "Information Created Successfully...";
              }


              return View(empinfo);
          }



          public ActionResult Edit() => View(edb.employeeinfo.ToList());
          [HttpGet]

          public ActionResult Edit(int? id)
          {

              EmployeeInfo empinfo = edb.employeeinfo.Find(id);
              return View(empinfo);
          }
          [HttpPost]
          [ValidateAntiForgeryToken]

          public ActionResult Edit(EmployeeInfo empinfo, HttpPostedFileBase image)
          {
              if (ModelState.IsValid)
              {
                  var model = edb.employeeinfo .Find(empinfo.EmployeeID );
                  string oldfilePath = model.Image ;
                  if (image != null && image .ContentLength > 0)
                  {
                      var fileName = Path.GetFileName(image .FileName);
                      string path = System.IO.Path.Combine(
                      Server.MapPath("~/EmployeeImage/"), fileName);
                      image.SaveAs(path);
                      model.Image  = "/EmployeeImage/" + image .FileName;
                      string fullPath = Request.MapPath("~" + oldfilePath);
                      if (System.IO.File.Exists(fullPath))
                      {
                          System.IO.File.Delete(fullPath);
                      }
                  }

                  model.Image  = empinfo .Image ;
                 edb.SaveChanges();
                  return RedirectToAction("Index");
              }
              return View(empinfo);
          }

create.cshtml

  @model MVC_Login_Registration.Models.EmployeeInfo

  @{
      ViewBag.Title = "Create";
  }
                            <div class="form-group">


                                    <div class="col-lg-4 col-md-4 col-sm-4 col-sm-12">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
                                            @Html.LabelFor(model => model.Image, new { @class = "control-label col-md-2" })
                                            <input type="file" name="image" onchange="previewFile()"><br>
                                            <img src="" height="100" alt="Image preview...">
                                            <script>
                                                function previewFile() {
                                                    var preview = document.querySelector('img');
                                                    var file = document.querySelector('input[type=file]').files[0];
                                                    var reader = new FileReader();

                                                    reader.addEventListener("load", function () {
                                                        preview.src = reader.result;
                                                    }, false);

                                                    if (file) {
                                                        reader.readAsDataURL(file);
                                                    }
                                                }
                                            </script>
                                            @Html.ValidationMessageFor(model => model.Image)

                                        </div>

                </form>
            </div>

Edit.cshtml

                                    @Html.LabelFor(model => model.Image, new { @class = "control-label col-md-2" })
                                    <input type="file" name="image" onchange="previewFile()" onload="loadFile()"><br>
                                    <img src="../EmployeeImage/(item.EmployeeID.ToString()+item.Image)" height="100">
                                    <img src=model.Image height="100" alt="Image preview...">
                                    <script>
                                        function previewFile() {
                                            var preview = document.querySelector('img');
                                            var file = document.querySelector('input[type=file]').files[0];
                                            var reader = new FileReader();

                                            reader.addEventListener("load", function () {
                                                preview.src = reader.result;
                                            }, false);

                                            if (file) {
                                                reader.readAsDataURL(file);
                                            }
                                        }

                                    </script>
                                    @Html.ValidationMessageFor(model => model.Image)
                                    @Html.HiddenFor(model => model.Image)
                                </div>

Answer 1

在Edit.cshtml文件中使用src =“@ Url.Content（model.Image）而不是src = model.Image

我不知道确切的错误，但上面的代码可能会以编辑形式显示您的图片。

如何在ASP.NET MVC中更新上载的图像

1 个答案: