我可以将图片存储在文件系统中,并将图像名称存储在数据库中,如下所示:Image1.JPG。但现在我想在上传后显示图片。
我有这个观点:
<div id="tabs-3">
@using (Html.BeginForm("UploadMorePhotos", "Account", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-field">
<p>Select pictures:</p>
<div class="upload-container">
<div class="upload">
<input type="file" name="files" value="" multiple="multiple" id="file1" />
<img src="@Url.Content("~/images/deleteButton.png")" alt="Remove picture." />
</div>
</div>
</div>
<div class="form-field">
<input type="submit" value="Upload" />
</div>
<br />
foreach (var item in Model.LolaBikePhotos )
{
@Html.DisplayFor(modelItem => item.ImagePath)
@*<img src="src=" data:@(item.mimetype);base64,@(html.raw(convert.tobase64string(item.filecontent)))" width="150" height="200" alt="" />*@
}
}
</div>
Jquery:
var currentImage = 1;
$("body").on("change", "input[name='files']", function () {
var pathToRemoveIcon = "@Url.Content("~/Images/deleteButton.png")";
currentImage = currentImage + 1;
var htmlToAppend = '<div class="upload"><input type="file" name="files" id="file' + currentImage + '" /><img src="' + pathToRemoveIcon + '" alt="Remove picture." /></div>';
$('.upload-container').append(htmlToAppend);
}).on("click", ".upload img", function () {
if ($(this).parent().siblings().length > 0) {
$(this).parent().remove();
}
});
和控制器操作:
[HttpPost]
public ActionResult UploadMorePhotos(UserProfile user, IEnumerable<HttpPostedFileBase> files)
{
foreach (var file in files)
{
if (file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/uploads" + @"\" + fileName.Replace('+', '_')));
file.SaveAs(path);
if (ModelState.IsValid)
{
string username = User.Identity.Name;
// Get the userprofile
user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));
// Update fields
user.Image = new byte[file.ContentLength];
file.InputStream.Read(user.Image, 0, file.ContentLength);
user.ImageMimeType = file.ContentType;
db.Entry(user).State = EntityState.Modified;
if (user != null)
{
var lolaphoto = new LolaBikePhoto
{
UserProfileID = user.Id
};
db.lolabikerPhotos.Add(lolaphoto);
lolaphoto.ImagePath = fileName;
}
}
db.SaveChanges();
}
}
return Redirect(Url.Action("Edit", "Account") + "#tabs-3");
}
型号:
[DisplayName("Image")]
[MaxLength]
public byte[] Image { get; set; }
[Display(Name = "Display profile Image")]
public bool DisplayItem { get; set; }
[DisplayName("ImageMimeType")]
public string ImageMimeType { get; set; }
public virtual ICollection<LolaBikePhoto> LolaBikePhotos { get; set; }
public class LolaBikePhoto
{
[Key]
public int PhotoID { get; set; }
//[System.ComponentModel.DataAnnotations.Schema.ForeignKey("UserProfileID")]
public int? UserProfileID { get; set; }
public string Photo { get; set; }
public string Notes { get; set; }
public string ImagePath { get; set; }
[System.ComponentModel.DataAnnotations.Schema.ForeignKey("UserProfileID")]
public virtual UserProfile userProfile { get; set; }
}
我可以像这样展示一张图片:
public ActionResult GetImage(int id)
{
byte[] image = db.userProfiles.Where(p => p.Id == id).Select(img => img.Image).FirstOrDefault();
return File(image, "image/jpeg");
}
但如何显示多个图像?