2013-10-04 14 views
16

だから私は、私はショッピングカートでプロジェクトを持っている使用してデータベースに画像を保存するために、ここで私のモデルである方法はなく、サーバーにアップロードすると、データベースへ画像を保存するためにMVC 4

namespace ShoppingCart.Models 
{ 
    [Bind(Exclude = "ItemID")] 
    public class Item 
    { 
     [ScaffoldColumn(false)] 
     public int ItemID { get; set; } 
     [DisplayName("Category")] 
     public int CategoryID { get; set; } 
     [DisplayName("Brand")] 
     public int BrandID { get; set; } 
     [Required(ErrorMessage = "A Name is required")] 
     [StringLength(160)] 
     public string Title { get; set; } 
     public string Description { get; set; } 
     [Required(ErrorMessage = "Price is required")] 
     [Range(0.01, 100.00, 
      ErrorMessage = "Price must be between 0.01 and 500.00")] 
     public decimal Price { get; set; } 
     [DisplayName("Album Art URL")] 
     [StringLength(1024)] 

     public string ItemArtUrl { get; set; } 
     public byte[] Picture { get; set; } 

     public virtual Category Category { get; set; } 
     public virtual Brand Brand { get; set; } 
     public virtual List<OrderDetail> OrderDetails { get; set; } 
    } 
} 

私はイメージやビューを表示するためにコントローラを挿入する方法についてはわかりませんが、これに関する情報を検索していますが、実際には何も見つけられません。

答えて

36

画像を行うには2つの簡単な方法があります - 1は、単にコントローラで画像自体を返すことです:

[HttpGet] 
    [AllowAnonymous] 
    public ActionResult ViewImage(int id) 
    { 
     var item = _shoppingCartRepository.GetItem(id); 
     byte[] buffer = item.Picture; 
     return File(buffer, "image/jpg", string.Format("{0}.jpg", id)); 
    } 

とビューはそれを参照しますが:

さらに
<img src="Home/ViewImage/10" /> 

、あなたはViewModelににそれを含めることができます。

viewModel.ImageToShow = Convert.ToBase64String(item.Picture); 

とビューで:

@Html.Raw("<img src=\"data:image/jpeg;base64," + viewModel.ImageToShow + "\" />"); 

データストアの場合、バイト配列(varbinary(max))またはblobまたは互換性のあるタイプを使用するだけです。

アップロード画像ここ

HeaderImageと呼ばれるオブジェクトがEntityFramework EntityObjectです。コントローラは、次のようになります。

[HttpPost] 
    public ActionResult UploadImages(HttpPostedFileBase[] uploadImages) 
    { 
     if (uploadImages.Count() <= 1) 
     { 
      return RedirectToAction("BrowseImages"); 
     } 

     foreach (var image in uploadImages) 
     { 
      if (image.ContentLength > 0) 
      { 
       byte[] imageData = null; 
       using (var binaryReader = new BinaryReader(image.InputStream)) 
       { 
        imageData = binaryReader.ReadBytes(image.ContentLength); 
       } 
       var headerImage = new HeaderImage 
       { 
        ImageData = imageData, 
        ImageName = image.FileName, 
        IsActive = true 
       }; 
       imageRepository.AddHeaderImage(headerImage); 
      } 
     } 
     return RedirectToAction("BrowseImages"); 
    } 

ビューは次のようになります。

  @using (Html.BeginForm("UploadImages", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) 
      { 
       <div class="row"> 
        <span class="span4"> 
         <input type="file" name="uploadImages" multiple="multiple" class="input-files"/> 
        </span> 
        <span class="span2"> 
         <input type="submit" name="button" value="Upload" class="btn btn-upload" /> 
        </span> 
       </div> 
      } 
関連する問題