「StudentImage」という HttpPostedFileBase プロパティを持つビュー モデルがあります。ユーザーがログインすると、バイト配列 (DB からの私のイメージ) をフェッチして表示したいですか? データベースから byte[] をフェッチし、httppostedfilebase から継承するメモリ ストリームを設定することで、byte[] を HttpPostedFileBase イメージに戻すことができます。しかし、フォームに画像が表示されません
これが私のビューモデルです
public class EditStudentViewModel
{
...other code here
public HttpPostedFileBase StudentImage { get; set; }
}
これは、バイト配列を取得するコントローラーであり、byte[] を HttpPostedFileBase である「StudentImage」に設定したい
public ActionResult Edit()
{
var years = Enumerable.Range(DateTime.Now.Year - 100, 100).Reverse();
string userId = User.Identity.GetUserId();
Student student = studentRepository.Find(userId);
// student.StudentImage => this is a byte array that I need to get
// into the HttpPostedFileBase named StudentImage into
// 'EditStudentViewModel'
var studentViewModel = new EditStudentViewModel
{
...other properties set here
StudentImage = new MemoryFile(new MemoryStream(student.StudentImage.Image));
};
MemoryFile という新しいクラスを作成し、HttpPostedBaseFIle を継承しました。
class MemoryFile : HttpPostedFileBase
{
Stream stream;
public MemoryFile(Stream stream)
{
this.stream = stream;
}
public override Stream InputStream
{
get { return stream; }
}
}
値が正しく設定されているようですが、フォームを画面に表示すると画像が表示されません! ここで見つけることができる使用している Bootstrap File Plugin では設定されませんBootStrap File Upload Plugin
これがファイルアップロードプラグインの私のjavascriptです
$("#input-20").fileinput({
'type': 'POST',
'cache': false,
'browseClass': 'btn btn-primary btn-block',
'showCaption': false,
'showRemove': false,
'showUpload': false,
'uploadAsync': false,
'maxFileCount': 1,
'allowedFileExtensions': ['jpg', 'png', 'gif'],
'allowedFileTypes': ['image'],
//'uploadUrl': '@Url.Action("Edit", "Student")'
});
ここに私のHTMLタグがあります
<div class="panel-body">
@Html.TextBoxFor(model => model.StudentImage, new { @type = "file", @id = "input-20" })
</div>