11

asp.net mvc4とrazor構文を使用して Web アプリケーションを開発しました。ファイルアップローダーを使用して画像をアップロードし、画像の詳細と同じページに表示する必要があります。

例として、私のアプリケーションには"file uploader"and"submit button"が"contact page"あります。人の画像と送信ボタンをアップロードするとclick、ページのどこかに画像が表示され、画像名やサイズなどの詳細が表示されます。

それを達成する方法はありますか？

ここに私のコントローラークラスのコードがあります

public class FileUploadController : Controller
    {
        //
        // GET: /FileUpload/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult FileUpload()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult FileUpload(HttpPostedFileBase uploadFile)
        {
            if (uploadFile.ContentLength > 0)
            {
                string filePath = Path.Combine(HttpContext.Server.MapPath("~/Img/"),
                                               Path.GetFileName(uploadFile.FileName));
            }
            return View();
        }
    }

ここに表示用のコードがあります

<h2>FileUpload</h2>

     @(Html.BeginForm("FileUpload", "FileUpload",FormMethod.Post, new { enctype = "multipart/form-data" }))
        <input name="uploadFile" type="file" />
        <input type="submit" value="Upload File" />

しかし、どのようにページに表示するのですか?

助けてください。

4

4 に答える 4

18

アップロードしたファイルをコントローラ アクションからサーバーに保存したら、このファイルの URL をビューに戻して、<img>タグで表示できるようにします。

public class FileUploadController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FileUpload()
    {
        return View();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult FileUpload(HttpPostedFileBase uploadFile)
    {
        if (uploadFile.ContentLength > 0)
        {
            string relativePath = "~/img/" + Path.GetFileName(uploadFile.FileName);
            string physicalPath = Server.MapPath(relativePath);
            uploadFile.SaveAs(physicalPath);
            return View((object)relativePath);
        }
        return View();
    }
}

次に、ビューを強く型付けし<img>、モデルが空でない場合に画像を表示するタグを追加します。

@model string
<h2>FileUpload</h2>

@using (Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" })
{
    <input name="uploadFile" type="file" />
    <input type="submit" value="Upload File" />
}

@if (!string.IsNullOrEmpty(Model))
{
    <img src="@Url.Content(Model)" alt="" />
}
于 2013-06-12T09:04:23.093 に答える
1

アップロードされた画像をページに表示するには、画像をどこかに保存してから、<img>タグで対応する URL を参照する必要があります。

ウェブサイトの場所内のディスクに保存すると、保存場所に対応する URL で参照できます (したがってImg、相対 URL に保存する場合は になります~/Img/imagename)。

データベースに保存する場合は、別のアクション メソッドを提供するかHttpHandler、取得する必要があります。

于 2013-06-12T09:04:04.013 に答える
-1

このような場合の典型的な流れは次のとおりです。

  1. Indexファイルアップロードコントロールを見ることができるアクションから始めます。
  2. FileUploadファイルのアップロードは、アクションに送信される形式です。
  3. あなたのFileUpload行動の中であなたはあなたのことをし、最後にあなたはreturn RedirectToAction("Index");

今明らかにやるべきことは他にもあります。そのファイルをどこかに保存する必要があります。たとえば、というディレクトリに保存しますUploadStuff。

index アクション内で、ファイルのディレクトリを読み取ります。

繰り返しますが、これはあなたを動かすためのものです。現実の世界では、このファイルへの参照をたとえばデータベースに保存し、userId や productId などの一意の識別子に基づいてそのデータベースにクエリを実行して、アップロードされたどのアイテムがインデックス ビューに表示されるかを判断します。

于 2013-06-12T09:03:47.273 に答える