Как сохранить URL-адрес изображения после обратной отправки формы, используя asp.net core mvc?

Question

Проблема, с которой я сейчас сталкиваюсь, - это входные теги fileupload, которые выдают «Файл не выбран» после неудачной проверки ModelState, и мне приходится снова выбирать файл изображения, так как сохранить изображение выбранного файла даже после обратной передачи?

 <div id="imagediv" class="form-group">
            <label asp-for="Image" class="control-label"></label>
            <img id="img1" class="img-rounded" />
            <input type="file" name="myfile" id="file" accept=".png,.jpg,.jpeg,.gif,.tif" class="form-control-file" />
            <span asp-validation-for="Image" class="text-danger"></span>
            <input asp-for="Image" id="fileinput" class="form-control" />
        </div>

 <script>
    $(document).ready(function () {
        $("#file").change(function () {
            if ($("#file").val() != "") {
                $("#fileinput").prop("value", $("#file").val().split('\\').pop());

                //to show new image at a time of image selected from file input type
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) { $('#img1').attr('src', e.target.result); }
                    reader.readAsDataURL(this.files[0]);
                }
            }
        });
    });
       </script>

Answer 1

Для больших файлов я бы посоветовал вам загрузить изображение на сервер с помощью ajax и установить URL-адрес динамически.Но я не знаю, как ваш сервер обслуживает статические изображения.Поэтому я покажу вам простой способ передачи изображения в виде строки base64 туда и обратно.Этот способ довольно прост для файлов небольшого размера.

Предполагая, что ваша модель вида:

public class MyViewModel{
    [MinLength(6)]
    public string Image {get;set;}
    public string DataUrl{get;set;}    
    // ... other fields as you like
}

и измените вашу форму, как показано ниже:

<form method="post" action="/home/index2" enctype="multipart/form-data">

    <input type="file" name="myfile" id="file" accept=".png,.jpg,.jpeg,.gif,.tif" class="form-control-file" />

    <!--file name-->
    <label asp-for="Image" class="control-label"></label>
    <input asp-for="Image" id="fileinput" class="form-control" />
    <span asp-validation-for="Image" class="text-danger"></span>

    <!-- preview -->
    <img id="img1" src="@Model.DataUrl" alt="your-image" class="img-rounded" />
    <input name="DataUrl" type="hidden" value="@Model.DataUrl">

    <button>Submit</button>
</form>

Примечание. Я создаю скрытый DataUrl для хранения в кодировке base64строка как URL.Когда файл изменяется, нам нужно установить значение DataUrl:

    $(document).ready(function () {
        $("#file").change(function () {
            if ($("#file").val() != "") {
                $("#fileinput").prop("value", $("#file").val().split('\\').pop());
                //to show new image at a time of image selected from file input type
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) { 
                        $('#img1').attr('src', e.target.result); 
                        $('input[name="DataUrl"]').val(e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            }
        });
    });

, и метод действия будет выглядеть так:

    [HttpPost("/home/index2")]
    public IActionResult Index(MyViewModel vm, IFormFile myfile)
    {
        if(ModelState.IsValid){
            // ...
        }else{
            // ...
        }
        return View(vm);
    }

demo: