显示userDrofile多个图像

时间:2014-10-23 08:35:32

标签: c# jquery asp.net-mvc-4 visual-studio-2013 entity-framework-5

我可以将图片存储在文件系统中,并将图像名称存储在数据库中,如下所示: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");
        }

但如何显示多个图像?

0 个答案:

没有答案