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);
    }

演示：

我如何在使用asp.net core mvc进行表单回发后保留图像URL？

1 个答案: