如何使html输入类型选择可选文件

Question

我想将 Image 的输入设为可选，但我不知道应该添加什么。 下面是我的 cshtml 文件的主要部分。我尝试了“价值”，但没有帮助。如果用户没有选择图像，则选择 /wwwroot/noiamge/noimage.png 中的图像。

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
})

<form>
  <div>
    <div class="form-group">
      <label asp-for="Image" class="control-label"></label>
      <br />
      <div class="custom-file">
        <input asp-for="Image" type="file" class="custom-file-input" id="FLFormFIle" onchange="document.getElementById('FormFilePrv').src = window.URL.createObjectURL(this.files[0])" />
      </div>
      <span asp-validation-for="Image" 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>

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("ArticleId,ArticleName,ArticlePrice,CategoryId,Image")] Article article, IFormFile image)
        {
            if(image != null)
            {
                string uniqueName = Guid.NewGuid().ToString() + "_" + Path.GetFileName(image.FileName);
                var name = Path.Combine(_hostingEnvironment.WebRootPath + @"\upload", uniqueName);
                image.CopyTo(new FileStream(name, FileMode.Create));
                article.Image = "upload/" + uniqueName;
            }
            if(image == null)
            {
                article.Image = "noimage/NoImage.png";
            }
            Article temparticle = _context.Articles.Where(x => x.ArticleName == article.ArticleName).FirstOrDefault();
            if (temparticle != null)
            {
                return RedirectToAction(nameof(Index));
            }
            _context.Add(article);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }

Answer 1

这是一个更干净的版本

可选是什么意思？

$(".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);
})

<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" 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>