記事詳細

投稿日
2026年06月09日21時20分
タイトル

ASP.NET MVC: wwwroot配下のImagesフォルダー内のファイル名（複数）をControllerのメソッドでnew SelectList()を作成するサンプルはありますか？そして 選択した画像を即時プレビュー表示する機能 を追加したバージョンも教えてください。

内容

はい、可能です。
以下に ASP.NET Core MVC（wwwroot/Images 配下のファイル名を取得 → SelectList に変換 → View で選択 → 即時プレビュー表示）という流れの 完全サンプル を示します。

1. Controller 側 — ファイル名取得と SelectList 作成

Csharp
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.IO;
using System.Linq;

namespace YourApp.Controllers
{
    public class ImageController : Controller
    {
        public IActionResult Index()
        {
            // wwwroot/Images の絶対パスを取得
            var imagesPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "Images");

            // フォルダが存在しない場合は空リスト
            var fileNames = Directory.Exists(imagesPath)
                ? Directory.GetFiles(imagesPath)
                          .Select(Path.GetFileName) // ファイル名のみ
                          .ToList()
                : new List<string>();

            // SelectList に変換
            ViewBag.ImageList = new SelectList(fileNames);

            return View();
        }
    }
}

2. View 側 — ドロップダウンと即時プレビュー

Views/Image/Index.cshtml

Cshtml
@{
    ViewData["Title"] = "Image Selector";
}

<h2>画像選択とプレビュー</h2>

<!-- ドロップダウン -->
<select id="imageSelect" asp-items="ViewBag.ImageList">
    <option value="">-- 画像を選択 --</option>
</select>

<!-- プレビュー表示領域 -->
<div style="margin-top:20px;">
    <img id="preview" src="" alt="プレビュー" style="max-width:300px; display:none; border:1px solid #ccc;" />
</div>

@section Scripts {
    <script>
        document.getElementById("imageSelect").addEventListener("change", function () {
            const fileName = this.value;
            const preview = document.getElementById("preview");

            if (fileName) {
                // wwwroot/Images/ にある画像を表示
                preview.src = `/Images/${fileName}`;
                preview.style.display = "block";
            } else {
                preview.src = "";
                preview.style.display = "none";
            }
        });
    </script>
}

3. wwwroot 構成例



wwwroot/
 └─ Images/
     ├─ sample1.jpg
     ├─ sample2.png
     └─ sample3.gif

4. 動作の流れ

  1. Controller が wwwroot/Images 内のファイル名を取得し、SelectList に変換して View に渡す。
  2. View の <select> にファイル名が表示される。
  3. ユーザーが選択すると JavaScript が /Images/{ファイル名} を <img> の src に設定し即時プレビュー。

5. 補足（セキュリティ）

  • 実運用では、拡張子チェック（.jpg, .png など）を行い、不要なファイルが表示されないようにしてください。
  • 外部からのパスインジェクション防止のため、Path.GetFileName() を必ず使用します。

もし希望があれば、このサンプルを Ajax + 部分ビュー にして、選択時にサーバーからメタ情報も取得するバージョンも作れますが、
まずはこのコードで 即時プレビュー付きの SelectList が動作します。

このあと、要望があれば 画像アップロード機能付きバージョン にも拡張できますが、作りますか？
そうすれば選択肢が自動更新され、アップロード直後にプレビューも可能になります。

Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
Controllers
編集 | 記事一覧