c# - 如何在将照片添加到数据库之前显示照片的预览？

Question

这是我在 ASP.Net Core 中的第一个项目。我的项目将举行董事。每个导演都有一个页面，显示他/她的电影列表。

我有两节课。电影：

public class Movie
    {
        public int MovieId { get; private set; }
        public int DirectorId { get; set; }
        [Required]
        public string Title { get; set; }
        public string Year { get; set; }
        public string Description { get; set; }
    }

和导演：

public class Director
    {
        public Director()
        {
            Movies = new List<Movie>();
        }
        public int DirectorId { get; set; }
        [Required]
        public string Name { get; set; }
        public string Country { get; set; }
        public string Bio { get; set; }
        public List<Movie> Movies { get; set; }
        public string PhotoURL { get; set; } // This field holds only the name of the photo, Not its URL.
    }

---

因此，我可以为每个导演上传一张照片，并将其保存在“wwwwroot/uploads”中。

我还可以更改照片以及每位导演的其他详细信息。当我想更改照片时，我会转到编辑页面并上传照片并按保存按钮。

---

问题是什么？

当我单击编辑页面中的“选择文件”按钮并从硬盘中选择一张新照片时，我没有立即看到新照片。我必须按“保存”按钮，然后访问“详细信息”页面才能看到新照片。

---

我想我想要的：

当用户单击“选择文件”并选择照片时，用户应该能够在按下“保存”按钮之前自动看到新照片的预览。

不过我不确定。解决这个问题的好方法是什么？这是我的第一个项目。一个非常简单的解决方案就可以了。

感谢您的阅读和任何帮助。

---

编辑页面：

    <form method="post" enctype="multipart/form-data">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

        <div class="form-group">
            <label asp-for="Director.DirectorId" class="control-label"></label>
            <input asp-for="Director.DirectorId" class="form-control" />

        </div>

        <div class="form-group">
            <label asp-for="Director.Name" class="control-label"></label>
            <input asp-for="Director.Name" class="form-control" />
            <span asp-validation-for="Director.Name" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Director.Country" class="control-label"></label>
            <input asp-for="Director.Country" class="form-control" />
            <span asp-validation-for="Director.Country" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Director.Bio" class="control-label"></label>
            <input asp-for="Director.Bio" class="form-control" />
            <span asp-validation-for="Director.Bio" class="text-danger"></span>
        </div>




        <dd>
            <img src="~/uploads/@Model.Director.PhotoURL" />
        </dd>

        <div class="form-group">
            <label asp-for="Director.PhotoURL" class="control-label"></label>
            <input type="file" asp-for="Image" class="form-control" />
            <span asp-validation-for="Director.PhotoURL" class="text-danger"></span>
        </div>


        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </form>

---

编辑模型（cshtml.cs 文件）：

public class EditModel : PageModel
{
    private readonly Context _context;
    private readonly IWebHostEnvironment hostingEnvironment;

    public EditModel(Context context, IWebHostEnvironment environment)
    {
        _context = context;
        this.hostingEnvironment = environment;
    }

    [BindProperty]
    public Director Director { get; set; }

    [BindProperty]
    public IFormFile Image { set; get; }

    public async Task<IActionResult> OnGetAsync(int? directorId)
    {
        if (directorId == null)
        {
            return NotFound();
        }

        Director = await _context.Director.FirstOrDefaultAsync(m => m.DirectorId == directorId);

        if (Director == null)
        {
            return NotFound();
        }
        return Page();
    }

    // To protect from overposting attacks, enable the specific properties you want to bind to, for
    // more details, see https://aka.ms/RazorPagesCRUD.
    public async Task<IActionResult> OnPostAsync(int? directorId)
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        if (this.Image != null)
        {
            var fileName = GetUniqueName(this.Image.FileName);
            var uploads = Path.Combine(hostingEnvironment.WebRootPath, "uploads");
            var filePath = Path.Combine(uploads, fileName);
            this.Image.CopyTo(new FileStream(filePath, FileMode.Create));
            this.Director.PhotoURL = fileName; // Set the file name
        }

        _context.Attach(Director).State = EntityState.Modified;

        try
        {
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!DirectorExists(Director.DirectorId))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return RedirectToPage("./Index");
    }

    private bool DirectorExists(int id)
    {
        return _context.Director.Any(e => e.DirectorId == id);
    }
    private string GetUniqueName(string fileName)
    {
        fileName = Path.GetFileName(fileName);
        return Path.GetFileNameWithoutExtension(fileName)
               + "_" + Guid.NewGuid().ToString().Substring(0, 4)
               + Path.GetExtension(fileName);
    }
}

标签： c#asp.netasp.net-corerazor