だるろぐ

明日できることは、今日しない。

WebMatrix でファイルのアップロード(4) - アップロードしたファイルの表示

f:id:daruyanagi:20120821091848p:plain

そういえば、アップロードしたファイルの表示をやっていなかった*1。アップロードフォルダには画像ファイルしかないはずなので、今回は img タグで決め打ちしていいかな。

# List.cshtml

@functions {
    private const string OUTPUT_DIR = "~/Files/";
}

@{
    var dir = Server.MapPath(OUTPUT_DIR);
    var files = new System.IO.DirectoryInfo(dir)
        .EnumerateFiles()
        .Select((f) => VirtualPathUtility
            .ToAbsolute(OUTPUT_DIR + f.Name));
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        a {
            display: block;
            float: left;
            height: 48px; width: 48px;
            margin: 6px;
            text-align: center;
        }
        a img {
            max-height: 48px; max-width: 48px;
            border: none;
        }
        </style>
    </head>
    <body>
        @foreach (var file in files)
        {
            <a href="@file"><img src="@file" /></a>
        }
    </body>
</html>

結果はこんな感じ。

f:id:daruyanagi:20120821092040p:plain

びっくりするほど難しくなかった。

OUTPUT_DIR はアップロード処理と共通なので、どこかにまとめておいたほうがいいな。むしろ、 OUTPUT_DIR フォルダーの内容を管理するクラスを作って、それを経由してファイルの保存・一覧をするようにするのが望ましいと思った。

*1:アップロード「結果」の表示はやっていたけれど