web-dev-qa-db-ja.com

フォルダーへのASP.Net MVC 5画像のアップロード

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"に保存します。

実際の編集ページにアップロードする必要があるだけなので、この時点でケーキはすでに作成されています。ファイルの名前を変更するために必要なすべての情報が利用可能で、編集ページから簡単に利用できるはずです。以下は私の編集ページコードです：

ページの編集：

@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>

私はいくつかのhtml5＆ASP.Net 4ソリューションを確認しましたが、これは多すぎます。私が欲しいのはとても簡単です。アイデアや正しい方向へのキックは非常に高く評価されます。私はこのコードをクライアントのWebサイトだけでなく、MVCの非常に基本的な概念を教えるために使用される架空のWebサイトにも含めています。

c#javascriptformsasp.net-mvc-5image-uploading
8
Eric Bishard

次のことを行う必要があります。

  • タイプinputのfileをフォームに追加し、
  • フォーム要素に属性がありますenctype = "multipart/form-data"

次に、HttpPostedFileBaseをinputの名前と同じ名前でモデルに追加します。次に、HttpPostedFileModelBinderは、アクションが呼び出される前に、アップロードされたファイルからモデルプロパティを設定します。画像が誤って上書きされないように、画像パスの一意性を保証するために、おそらくモデル要素をパス要素として追加する必要があると思います。

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));
           }

           ....
      }
}
18
tvanfosson

ここで提供されたコードは、最終的には、ファイルシステムに画像をアップロードし、データベースに値を格納せずに動的に使用できるようにする、この小さなデモを構築するために使用されました。ただし、表示するアップロードされたファイルの規則と名前を使用するModelクラスの一部として、画像ファイルの場所への文字列を取得します。

これをgithubにアップロードし、このアイデアを使用するより良いソリューションを作成するのを手伝ってくれる人が他にいないかどうかを確認したいと思います。 MongoDBでも動作するようにすることを考えています。

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

1
Eric Bishard