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:アップロード「結果」の表示はやっていたけれど