Question

我在员工注册过程中使用Krajee bootstrap fileinput插件进行图片上传。图像保存到项目中的文件夹中，路径保存到数据库中。

在编辑员工时，我想从数据库中显示上传的图像。

我的问题是如何从数据库中显示图像。

Db结构

EmployeeId        PhotoUrl

   1             ~/UploadImages/Employee/Photo/Emp1.jpg

我从网站上获得了示例代码

$(document).on('ready', function() {
$("#input-24").fileinput({
    initialPreview: [
        '<img src="/images/moon.jpg" class="file-preview-image" alt="The Moon" title="The Moon">',
        '<img src="/images/earth.jpg" class="file-preview-image" alt="The Earth" title="The Earth">'
    ],
    overwriteInitial: false,
    maxFileSize: 100,
    initialCaption: "The Moon and the Earth"
});

}）;

如何从数据库中获取intialPreview？

HTML标记

<div class=" form-group ">
  <label for="txtPhoto" class=" control-label">
    Photo
  </label>
  <label class="reqdLabel">
    *
  </label>
  @Html.TextBoxFor(m => m.PhotoUrl, new { @class = "form-control imgUpload", @placeholder = "Please upload Photo", @id = "txtPhoto", @type = "file" }) 

  @Html.ValidationMessageFor(m => m.PhotoUrl)

</div>

用于调用fileInput的JQuery

//fileUpload plugin
$(".imgUpload").fileinput({
    showUpload: false,
   //How can I set value here
    initialPreview: [
        '<img src="~/UploadImages/Employee/AddressProof/Emp16.jpg" class="file-preview-image" alt="The Moon" title="The Moon">'           
    ],
    overwriteInitial: false,
    initialCaption: "Emp16.jpg"
});

Answer 1

要分配初始图像，您可以使用

$(".imgUpload").fileinput({
  showUpload: false,
  initialPreview: [
    '<img src="@Model.PhotoUrl" class="file-preview-image" .... >'           
  ],
  ....
});

但是，您使用@Html.TextBoxFor(m => m.PhotoUrl, ...)将无法正常运行，因为type="file"会将HttpPostedFileBase更改为PhotoUrl，但属性string的类型为<input type="file", name="photoFile" class="imgUpload" ... />。

您可以手动生成html

[HttpPost]
public ActionResult Edit(Employee model, HttpPostedFileBase photoFile)

然后POST方法将包含上传文件的参数

public class EmployeeVM
{
  public string PhotoUrl { get; set; }
  public HttpPostedFileBase PhotoFile { get; set; }
  .... // other properties
}

或更好，使用包含url和文件

属性的视图模型

@Html.TextBoxFor(m => m.PhotoFile, new { type = "file", @class = "imgUpload" })

并在视图中

{{1}}

Krajee bootstrap fileinput-显示来自数据库的图像

1 个答案: