ASP .NET MVC：获取 url 并在图像发生变化时查看图像

Question

我有一个允许我编辑图像的功能，但我想在单击“编辑”按钮后立即获得当前图像的 URL 图片：看不到“未选择文件” 我想让图片的URL出现在右边第二步一旦我换了一张图片我也想把图片换成我换的图片

我的服务：

public class FileService : IFileService
{
private readonly IWebHostEnvironment _environment;
public FileService(IWebHostEnvironment environment)
{
    _environment = environment;
}
public async Task<string> File([FromForm] CreateAnimalViewModel model)
{
    string wwwPath = _environment.WebRootPath;
    var path = Path.Combine(wwwPath, "Images", model.Photo!.FileName);
    if (model.Photo.Length > 0)
    {
        using var stream = new FileStream(path, FileMode.Create);
        await model.Photo.CopyToAsync(stream);
    }
      return model.Animal!.PhotoUrl = model.Photo.FileName;
}

public interface IFileService
{
Task<string> File([FromForm] CreateAnimalViewModel model);
}

My ViewModel:

public class CreateAnimalViewModel
{
public Animal? Animal { get; set; }
public IFormFile Photo { get; set; }
}

我的控制器：

public async Task<IActionResult> EditAnimal(int id)
{
    var animal = await _repo.FindAnimalById(id); 
    ViewBag.Category = new SelectList(_repository.GetCategoriesTable(), "CategoryId", "Name");
    return View(new CreateAnimalViewModel() { Animal = animal});
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> EditAnimal([FromForm] CreateAnimalViewModel model)
{
    ModelState.Clear();
    TryValidateModel(model);

    await _file.File(model);

    if (!ModelState.IsValid)
    {
        await _repo.EditAnimal(model.Animal!);
        return RedirectToAction(nameof(Manager));
    }
    return View();
}

我的存储库：

 public async Task<int> AddAnimal(Animal animal)
{
    _context.Add(animal!);
    return await _context.SaveChangesAsync();
}

public async Task<int> EditAnimal(Animal animal)
{
    _context.Update(animal);
    return await _context.SaveChangesAsync();
}

public DbSet<Category> GetCategories()
{
    var category = _context.Categories;
    return category;
}

我的看法：

@model PetShop.Client.Models.CreateAnimalViewModel
    <form asp-action="EditAnimal" method="post" enctype="multipart/form-data">
    <div asp-validation-summary="ModelOnly"></div><input type="hidden" asp-for="Animal!.AnimalId" id="Space"/>
    <dl class="row" >
    <dt class = "col-sm-2"><label asp-for="Animal!.Name" id="Space"></label></dt>
    <dd class = "col-sm-10"><input asp-for="Animal!.Name"/><span asp-validation-for="Animal!.Name" id="Validation"></span></dd>
    <dt class = "col-sm-2"><label asp-for="Animal!.BirthDate" id="Space"></label></dt>
    <dd class = "col-sm-10"><input asp-for="Animal!.BirthDate"/><span asp-validation-for="Animal!.BirthDate" id="Validation"></span></dd>
    <dt class = "col-sm-2"><label asp-for="Animal!.Description" id="Space"></label></dt>
    <dd class = "col-sm-10"><input asp-for="Animal!.Description"/><span asp-validation-for="Animal!.Description"></span>
    </dd> <dt class = "col-sm-2"><label asp-for="Animal!.CategoryId" id="Space"></label></dt>
    <dd class = "col-sm-10"><select asp-for="Animal!.CategoryId"asp-items="ViewBag.Category"></select>
    <span asp-validation-for="Animal!.CategoryId"></span></dd>
    <dt class = "col-sm-2"><label asp-for="Photo"></label></dt>
    <dd class = "col-sm-10"><input type="file" asp-for="Photo" accept="image/*"/>
        <img src="~/images/@Model.Animal!.PhotoUrl"
                         class="rounded-square"
                         height="50" width="75"
                         style="border:1px"
                         asp-append-version="true" accept="image/*" />
    <span asp-validation-for="Photo" id="ImageValidation"></span></dd>
    <br /> <br /><br/><input type="submit" value="Save" id="ButtonDesign"/>
</dl>
</form>
     <a asp-action="Commands"><input type="submit" value="Back to Admin Page" id="BackPageButton"/></a>

图片：

Answer 1

You cannnot implement that:

I have gone through your code what you are trying to implement is to set intial value on input type="file" which is not possible due to security reason which you can check here. In addition you can also have a look here thousands of quuestions been asked before. Note that its agains RFC standard

What you can do is:

在加载 Edit 页面时隐藏 <input type="file"
在 photo 旁边设置一个复选框，它 URL 如下所示：

如果选中复选框，则显示 file upload 选项。

Note: Elementary Javascript required for that implementation

HTML:

<div>
    <form asp-action="EditAnimal" method="post" enctype="multipart/form-data">
        <div asp-validation-summary="ModelOnly"></div><input type="hidden" asp-for="Animal!.AnimalId" id="Space" />
        <div>
            <h4><strong>Animal Details</strong> </h4>

            <table class="table table-sm table-bordered table-striped">

                <tr>
                    <th> <label asp-for="Animal!.Name"></label></th>
                    <td> <input asp-for="Animal!.Name" class="form-control" placeholder="Enter animal name" /><span asp-validation-for="Animal!.Name"></span></td>
                </tr>
                <tr>
                    <th> <label asp-for="Animal!.Description"></label></th>
                    <td> <input asp-for="Animal!.Description" class="form-control" placeholder="Enter animal description" /><span asp-validation-for="Animal!.Description"></span></td>
                </tr>
                <tr>
                    <th> <label asp-for="Animal!.Category"></label></th>
                    <td> <input asp-for="Animal!.Category" class="form-control" placeholder="Enter animal category" /><span asp-validation-for="Animal!.Category"></span></td>
                </tr>
                <tr>
                    <th> <label asp-for="Photo"></label></th>
                    <td>
                        <img src="~/images/@Model.Animal!.PhotoUrl"
                             class="rounded-square"
                             height="50" width="75"
                             style="border:1px"
                             asp-append-version="true" accept="image/*" />
                        <span><a href="@Model.ImageURL">@Model.ImageURL</a></span>
                        <input type="checkbox" id="CheckBoxId" class="form-check-input" style="margin-top:16px;border:1px solid" /> <span><strong>Upload New File</strong></span>
                        <input type="file" name="photo" id="chooseFile" accept="image/*" />
                    </td>
                </tr>

                <tr>
                    <th> <label>Updated On Local Time</label></th>
                    <td> <input asp-for="Animal!.LocalTime" class="form-control" disabled /><span asp-validation-for="Animal!.Category"></span></td>
                </tr>
                
                <tr>
                    <th>  <button type="submit" class="btn btn-primary" style="width:107px">Update</button></th>
                    <td> </td>
                </tr>
                <tr>
                    <th>@Html.ActionLink("Back To List", "Index", new { /* id=item.PrimaryKey */ }, new { @class = "btn btn-success" })</th>
                    <td> </td>
                </tr>
            </table>
        </div>
    </form>

</div>

Javascript:

@section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function () {
        //On Edit Page Load Hiding the upload option
        $("#chooseFile").hide();

        //When upload check box clicked showing the upload option
        $('#CheckBoxId').mousedown(function() {
            if (!$(this).is(':checked')) {
                 this.checked = true;
                $("#chooseFile").show();
            }
            else{
                $("#chooseFile").hide();
            }
        });

    });
</script>
}

Output:

希望这对您有所帮助。

ASP .NET MVC：获取 url 并在图像发生变化时查看图像

ASP .NET MVC: Get the url and view the image as it changes

asp.net-mvc

asp.net-core