ASP .NET CORE MVC, html - 如果用户未选择任何图像，请选择默认图像

Question

我希望“选择文件”是可选的。这意味着如果用户不单击“选择文件”，则会选择默认图像（/wwwroot/n-image/NoImage.png）。 "Image" 是 Article 对象的字符串属性。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form>
  <div>
    <div class="form-group">
      <label asp-for="Image" class="control-label"></label>
      <br />
      <div class="custom-file">
        <input type="file" asp-for="Image" class="custom-file-input" id="FLFormFIle" />
      </div>
      <span class="text-danger"></span>
      <br />
    </div>

    <img id="FormFilePrv" src="" style="border:1px; top:20px;margin-left:120px;" />
    <div class="form-group">
      <br />
      <input type="submit" value="Utwórz artykuł" class="btn btn-primary" />
    </div>
  </div>
</form>

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  document.getElementById('FormFilePrv').src = window.URL.createObjectURL(this.files[0])
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
})

Answer 1

我在您的视图中编辑了一些代码。我在wwwroot/n-image 中设置了默认图像117.png，当页面加载时，<img id="FormFilePrv" src="/n-image/117.png" class="detailImage" /> 将显示默认图像，如果用户没有选择任何图像，只需单击submit 按钮，<input type="hidden" name="ImagePath" id="test" value="/n-image/117.png"/> 将提交默认图像图片的路径。

如果用户点击Change button，选中的Image会显示在<img.../>，<input type="hidden" ...../>的值会变成选中Image的路径。

查看

<form asp-controller="Home" asp-action="Show" method="post" enctype="multipart/form-data">
      <div>
        <div class="form-group">
          <label  name="Image" class="control-label"></label>
          <br />
          <div class="custom-file">
            <input type="file" name="Image" class="custom-file-input" id="FLFormFIle" />
          </div>
          <span class="text-danger"></span>
          <br />
        </div>
    
        <img id="FormFilePrv"  src="/n-image/117.png" class="detailImage" />
        <input type="hidden"   name="ImagePath" id="test" value="/n-image/117.png"/>
        <div class="form-group">
          <br />
          <input type="submit" value="Utwórz artykuł" class="btn btn-primary" />
        </div>
      </div>
    </form>
    
    @section Scripts
    {
        <script>
            $(".custom-file-input").on("change", function() {
              var fileName = $(this).val().split("\\").pop();
              document.getElementById('FormFilePrv').src = window.URL.createObjectURL(this.files[0]);      
              $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
              var ImagePath =  document.getElementById('FormFilePrv').src;
              document.getElementById('test').value= ImagePath;
            })
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    }

控制器

        [HttpGet]
        public IActionResult Show()
        {
           
            return View();
        }

        [HttpPost]
        public async Task<IActionResult> Show(string ImagePath,IFormFile Image)
        { 
          //......
            return View();
        }

演示

当用户直接点击submit按钮时，默认Image的路径将提交给控制器。

当用户选择一个Image并点击submit按钮时，选择的Image和选择的Image的路径将提交给控制器。