时间戳

首页 > 解决方案 > 有没有办法将 input type="file" 'HttpPotedFileBase' 的 src 设置为 asp.net mvc 中已上传的图片？

c# - 有没有办法将 input type="file" 'HttpPotedFileBase' 的 src 设置为 asp.net mvc 中已上传的图片？

问题描述

我正在做一个项目，我必须在其中制作一个简历生成器。我正在使用相同的表单进行编辑和插入。Edit 返回相同的 Index 方法，但带有关于该 Id 的特定信息。
我的问题是我不知道如何在输入类型=“文件”中绑定该特定图像，并且我总是遇到“请选择图像”的情况。
所有图像都保存在我在项目中创建的图像文件夹中。

屏幕截图 当我浏览并选择图像 时 当我返回 View 并包含有关该 Id 的特定信息时

剃刀视图

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data", id = "quickForm" }))
        {
           <div class="col-md-4">
                    <!-- Image Upload -->
                    <div class="container">
                        <div class="avatar-upload">
                            <div class="avatar-edit">
                                <input type='file' name="File" id="File" src="@(Model.ImagePath != null && File.Exists(Server.MapPath(Model.ImagePath)) ? Server.MapPath(Model.ImagePath) : Url.Content("~/Content/Images/Default_Image.png" ))" accept=".png, .jpg, .jpeg" required />
                                <label for="File"></label>
                            </div>
                            <div class="avatar-preview" style="width:100%;height:13em">
                                <div id="imagePreview" style="background-image: url('@(Model.ImagePath != null && File.Exists(Server.MapPath(Model.ImagePath)) ? Url.Content(Model.ImagePath) : Url.Content("~/Content/Images/Default_Image.png" ))');">
                                    @*../../Content/Images/Default_Image.png*@
                                </div>
                            </div>
                        </div>
                        <h1>
                             Image Upload
                            <small>.png, .jpg, .jpeg</small>
                        </h1>
                    </div>
                </div>
        }

我正在通过 JQuery 设置文件的来源

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
                    $('#imagePreview').hide();
                    $('#imagePreview').fadeIn(650);
                    $('#File').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#File").change(function () {
            readURL(this);
        });

模型类

 public class BasicInformation
    {
        [Required]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int Id { get; set; }
        [StringLength(150)]
        public string ImageTitle { get; set; }
        [StringLength(150)]
        public string ImagePath { get; set; }
        [NotMapped]
        public HttpPostedFileBase File { get; set; }
    }

控制器方法

public ActionResult Index(int? id)
        {
            BasicInformation info = db.BasicInformation.Find(id);
            if (info != null)
            {
                return View(info);
            }
            else
            {
                BasicInformation information = new BasicInformation();
                return View(information);
            }
        }

标签： c#jqueryasp.net-mvcfile-uploadimage-upload

解决方案

不幸的是，由于安全限制，您无法更改输入 type="file" 的值。

看这里。

我遇到过同样的问题; 我正在创建一个用于创建和编辑相同数据的表单。做到这一点的唯一方法是在没有文件的情况下提交请求，并在后端检查文件是否存在于 post 请求中。如果存在，请在数据库/磁盘中替换它，如果不存在，请保留旧的。

但是用户如何理解文件是否存在呢？唯一的方法是放置一些指示当前文件的东西。

对于图像，我通常在<img>旁边放置一个，然后用数据库中的现有 img 填充 img。

然后，如果你想让它变得更好，你可以监听 <input type="file" 的 onChange ，如果文件是图像，你可以将它作为 src 进入，这样用户就可以实时预览该图像.

例如，看这个

推荐阅读