ASP.Net MVC (5) 이미지 업로드는

Question

가 나는 또한

I MVC (5)에서 스캐 폴딩 된 기본 CRUD 작업을 사용하고있는 고객에 대한 제품 페이지가 매우 간단한 MVC5 응용 프로그램이있는 폴더로 클라이언트가 케이크를 판매하기 때문에 Cakes.cs라는 모델이 있습니다. 아주 간단합니다.

using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 

    namespace TastyCakes.Models 
    { 
     public class Cakes 
     { 
      public int CakesID { get; set; } 
      public string Name { get; set; } 
      public string Description { get; set; } 
      public decimal Price { get; set; } 

      public string CakeImage 
      { 
       get { return Name.Replace(" ", string.Empty) + ".jpg"; } 
      } 
     } 
    } 

당신은 내가 각각의 케이크에 대한 이미지 이름을 생성하기 위해 계산 된 속성을 사용하고 볼 수 있듯이 다음은 해당 모델에 대한 코드입니다. 각 케이크마다 1 개의 이미지 만 필요합니다. 이제 CRUD 페이지에서 케이크 편집을 시작합니다. 이미지를 업로드 할 간단한 이미지 업로드를 추가하고 싶습니다. (크기 조정이나 축소판이 필요 없습니다.) 그러나 계산 된 속성 이름을 부과하고 싶습니다. 즉, 사용자가 사진 이름을 지정 했더라도 내 업로드 코드는 Cakes.Name이 (공백 빼기 + ".jpg") 무엇이든간에 이름을 바꿔 "~ Images/Cakes"에 저장합니다.

업로드가 실제 편집 페이지에만 있어야하므로 케이크가 이미 만들어졌습니다. 파일 이름을 변경하는 데 필요한 모든 정보는 편집 페이지에서 사용 가능하고 쉽게 사용할 수 있어야합니다.

페이지 편집 : 다음은 내 편집 페이지 코드 내가 몇 HTML5를 & ASP.Net 4 솔루션을 검토 한

@model TastyCakes.Models.Cakes 

<div class="row"> 
    <div class="large-12 columns"> 
    <hgroup class="title"> 
     <h1>Edit Cakes</h1> 
    </hgroup> 

    @using (Html.BeginForm()) 
    { 
     @Html.AntiForgeryToken() 

     <div class="form-horizontal"> 
      <hr /> 
      @Html.ValidationSummary(true) 
      @Html.HiddenFor(model => model.CakesID) 

      <div class="medium-12 column"> 
       @Html.LabelFor(model => model.Name) 
       @Html.EditorFor(model => model.Name) 
       @Html.ValidationMessageFor(model => model.Name) 
      </div> 

      <div class="medium-12 column"> 
       @Html.LabelFor(model => model.Description) 
       @Html.EditorFor(model => model.Description) 
       @Html.ValidationMessageFor(model => model.Description) 
      </div> 

      <div class="medium-12 column"> 
       @Html.LabelFor(model => model.Price) 
       @Html.EditorFor(model => model.Price) 
       @Html.ValidationMessageFor(model => model.Price) 
      </div> 

      <div class="medium-12 column"> 
       <input type="submit" value="Save" class="tiny button" /> 
       @Html.ActionLink("Back to List", "Index", null, new { @class = "tiny button" }) 
      </div> 
     </div> 
    } 

    @section Scripts { 
     @Scripts.Render("~/bundles/jqueryval") 
    } 
    </div> 
</div> 

,하지만이 너무 많이 있습니다. 내가 원하는 것은 매우 간단합니다. 어떤 아이디어 나 올바른 방향으로 걷어차는 것은 대단히 감사 할 것입니다. 나는 클라이언트 웹 사이트뿐만 아니라 매우 기본적인 MVC 개념을 가르치는 가상의 웹 사이트에이 코드를 사용하고있다.

Answer 1

에 당신이 필요합니다 :

• 가 양식에 입력 file의 input를 추가,
• 는 enctype = "multipart/form-data"

그런 다음 모델에 HttpPostedFileBase를 추가하려면 폼 요소에 속성이 input의 이름과 같은 이름으로 그런 다음 HttpPostedFileModelBinder은 작업이 호출되기 전에 업로드 된 파일의 model 속성을 채 웁니다. 참고, 아마도 당신이 어딘가에 아마도 경로 요소로 어딘가에 모델 ID를 추가해야한다고 생각합니다. 우연히 이미지를 덮어 쓰지 않도록 이미지 경로의 고유성을 보장해야합니다. 여기에 공급 된 코드는 결국 파일 시스템에 이미지를 업로드하고 저장하지 않고 그것들을 동적으로 사용할 수 있도록이 작은 데모를 구축 들어갔다 http://www.prideparrot.com/blog/archive/2012/8/uploading_and_returning_files

public class Cakes 
{ 
    ... 

    public HttpPostedFileBase UploadedFile { get; set; } 

} 

[HttpPost] 
public ActionResult Edit(Cakes cake) // I'd probably use a view model here, not the domain model 
{ 
     if (ModelState.IsValid) 
     { 
      if (cakes.UploadedFile != null) 
      { 
       cakes.UploadedFile.SaveAs(Path.Combine("path-to-images-for-this-cake", cakes.CakeImage)); 
      } 

      .... 
     } 
} 

Answer 2

에서이 합리적 완전한 논의가있어

값을 데이터베이스에; 그러나 이미지 파일 위치에 대한 문자열은 Model 클래스의 일부로 사용되며이 클래스는 규칙을 사용하고 업로드 된 파일의 이름을 표시합니다.

이 내용을 github에 업로드하고이 아이디어를 사용하는 더 나은 솔루션을 찾기 위해 다른 사람들을 도울 수 없는지 확인하고 싶습니다. 그것도 MongoDB와 함께 작동하도록 생각합니다.

ASP.NET MVC 5 Image Upload & Delete w/ Calculated Property