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

Posted 2023-03-22

【中文标题】有没有办法将 input type="file" \'HttpPotedFileBase\' 的 src 设置为 asp.net mvc 中已上传的图片？

【英文标题】：Is there a way to set the src of input type="file" 'HttpPotedFileBase' set to already uploaded Picture in asp.net mvc?有没有办法将 input type="file" 'HttpPotedFileBase' 的 src 设置为 asp.net mvc 中已上传的图片？

【发布时间】：2021-10-16 18:42:17

【问题描述】：

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

屏幕截图 When I am browsing and choosing an Image When I return View with specific information about that 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 设置 File 的来源

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

【参考方案1】：

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

Look here.

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

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

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

然后，如果你想让它变得更好，你可以监听

For example, look this

【讨论】：

我正在使用 jQuery 预览图像。顺便说一句，感谢您的反馈。不过对我来说真的很不幸，因为在前端，我使用 JQuery 验证表单并随后发送 ajax 请求。如果文件不存在，则不会发送 Ajax 请求。对我来说不幸的是，我想我现在必须重构我的代码。

【参考方案2】：

您可以尝试从 src¹ 属性创建一个 blob，然后创建一个 File 对象。创建一个剪贴板对象以访问 FileList，然后将文件添加到文件列表中，并将输入中的文件列表替换为剪贴板中的文件列表

// show the file in the input field
$('#File').on('change', function()
    var url = URL.createObjectURL(this.files[0]);
    $('#Image').prop('src', url);
);
var url = $('#File').attr('src');
fetch(url)
.then(res => res.blob())
.then(blob =>
    const dt = new ClipboardEvent('').clipboardData || new DataTransfer(); 
    dt.items.add(new File([blob], 'some_file_name.ext'));
    $('#File').prop('files', dt.files);
    $('#File').trigger('change');
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='file' name="File" id="File" src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" accept=".png, .jpg, .jpeg" required />
<img id="Image">

我建议改用data-src 作为属性。