如何使用 asp.net core mvc 在表单回发后保留图像 url？答案

【问题标题】：How can I keep image url after form postback using asp.net core mvc?如何使用 asp.net core mvc 在表单回发后保留图像 url？
【发布时间】：2019-07-04 06:31:19
【问题描述】：

我现在面临的问题是文件上传输入标签在模型状态验证失败后给出“未选择文件”，我必须再次选择图像文件，那么即使在回发后如何保留选择的文件图像？

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

【问题讨论】：

您可以将图像转换为base64字符串
我没有上传到服务器的问题，我只希望它保留视图页面上的图像路径。
您的服务器可以使用代表图像的 base64 响应，然后使用 <img src='data:image/gif;base64,xxxxxxxxxx'> 显示图像
我还没有得到这个问题的答案，我该怎么办？
有很多方法可以做到这一点。一种方法是使用 ajax 上传图片，并使用src=uploaded_uri 动态设置图片，因此您无需再次上传；另一种方法是将您的图像编码为 base64 字符串，以便您可以在浏览器和服务器之间来回传递 base64 字符串（例如：添加隐藏输入并设置 value=base64 ）。两者都应该工作。

标签： jquery asp.net-mvc asp.net-core .net-core

【解决方案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);
    }

演示：

【讨论】：