无法将图像加载到编辑视图中的部分视图

Posted 2023-02-15

【中文标题】无法将图像加载到编辑视图中的部分视图

【英文标题】：Can't load image to partial view in edit view

【发布时间】：2021-12-18 09:43:48

【问题描述】：

在我的应用程序中，以前我在将数据加载到局部视图时遇到了问题。在帮助下，我解决了这个问题。但是这里仍然存在一些问题。现在，当创建请求时，我使用这个局部视图为用户添加数据和图像。

@model Asp_PASMVC.Models.GeneralItms
@using Asp_PASMVC.Infrastructure

@ 
    var z = Model.Attachment_Description;
    var a = Model.Attachment_Amount;
    var x = Model.Attachment;


<li style="padding-bottom:15px">


    @using (html.BeginCollectionItem("GeneralItmsList"))
    
        @Html.HiddenFor(model => model.TempID)
        <div class="form-horizontal" id="quickForm" novalidate="novalidate">

            @Html.ValidationSummary(true, "", new  @class = "text-danger" )
            <div class="row">
                <div class="col-md-5 col-sm-6">
                    <div class="form-group">
                        Select Item Description
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Attachment_Description, new  htmlAttributes = new  @class = "form-control"  )
                            @Html.ValidationMessageFor(model => model.Attachment_Description, "", new  @class = "text-danger" )

                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="form-group">
                        Attachment Amount
                        <div class="col-md-10">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Rs.</span>

                                @Html.EditorFor(model => model.Attachment_Amount, new  htmlAttributes = new  @class = "form-control"  )
                            </div>
                            @Html.ValidationMessageFor(model => model.Attachment_Amount, "", new  @class = "text-danger" )
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6">
                    <div class="form-group">
                        Attachment
                        <div class="col-md-10">
                            <input type="file" name="ImageData@(Model.TempID.ToString())" id="ImageData@(Model.TempID.ToString())" multiple="multiple" data-id="Img@(Model.TempID.ToString())" onchange="checkImage(this)" />
                            @Html.ValidationMessageFor(model => model.Attachment, "", new  @class = "text-danger" )
                        </div>
                    </div>
                    <img id="Img@(Model.TempID.ToString())" src=""    class="ml-1" />
                </div>
                <button type="button" class="btn btn-danger" onclick="$(this).parent().remove();">Remove</button>
            </div>

        </div>

    
</li>

<script type="text/javascript">

    $('.js-dropdown').select2(
        width: '100%', // need to override the changed default
    );
    function checkImage(obj) 
        var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
        var ResponceImgId = $(obj).data('id');
        if ($.inArray($(obj).val().split('.').pop().toLowerCase(), fileExtension) == -1) 
            alert('error', 'Upload Error', 'Only .jpeg, .jpg, .png, .gif, .bmp formats are allowed.');
      
        else 
            var files = obj.files;
            var reader = new FileReader();
            name = obj.value;
            reader.onload = function (e) 
                $('#' + ResponceImgId).prop('src', e.target.result);
            ;
            reader.readAsDataURL(files[0]);
        
    

</script>

在控制器中创建请求时，我有这样的代码

if (appRequest.GeneralItmsList != null)
 
   foreach (GeneralItms item in appRequest.GeneralItmsList)
    
     HttpPostedFileBase file = Request.Files["ImageData" + item.TempID];
     item.Attachment = ConvertToBytes(file);
    

  appRequest.General = new List<General>() 
    
      new General
       
        GeneralItms = appRequest.GeneralItmsList,

       
    ;

并且该方法会将图像转换为字节并传递给控制器​​以提交数据。

public ActionResult RetrieveImageG(int id)
 
   var q = from temp in db.GeneralItms where temp.Id == id select temp.Attachment;
    byte[] cover = q.First();
     if (cover != null)
      
        return File(cover, "image/jpg");
      
       else
      
        return null;
      
 

所以 Crete 工作正常，在编辑视图中时，我再次调用相同的局部视图来加载编辑主视图中的数据。

它有 3 个字段。 物品说明、金额和附件。 所以它正在正确加载项目描述和数量，它不会再次加载图像。在我放置的部分视图中

@ 
    var z = Model.Attachment_Description;
    var a = Model.Attachment_Amount;
    var x = Model.Attachment;

要检查的是传递给视图的数据。附件显示在 Model.Attachment 中。但它不会显示在视图中。我可以在这方面寻求帮助吗？

【问题讨论】：

您的表单标签在哪里？ enctype 是什么？

【参考方案1】：

如果您的模型中已经加载了图像：这样做可以显示图像

<img src="data:image;base64,@System.Convert.ToBase64String(Model.Attachment)" />

【讨论】：

您的代码正在运行。但我想知道，图像预览代码已经存在，问题是 model.Attachment 字段不接受数据