HTML5 の複数ファイルアップロードを使う

HTML5 では input でのファイルアップロードが拡張されていて、multiple 属性を付けると複数のファイルを送信できるようになっています。

残念ながら IE9 では使えないのですが、ASP.NET MVC での使い方のメモを兼ねて書いておきます。

ビュー

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="files" multiple="multiple" />
    
    <input type="submit" />
}

@if (ViewBag.Files != null)
{
    foreach (var file in (HttpPostedFileBase[])ViewBag.Files)
    {
        @file.FileName<br />
    }
}

ビュー側はちょっと手を抜きました。

BeginForm は actionName と controllerName に null を指定すると、今のアクションとコントローラ向けのタグが生成されます。ファイルアップロード時に enctype を multipart/form-data にするのは常識ですね。

input タグに multiple 属性を付けると、files という名前で複数のファイルが飛んでくるのでコントローラ側で受け取ります。PHP では name 属性に指定した名前の後ろに [] を付けて配列として受け取るようにしますが、ASP.NET MVC では不要です。

コントローラ

[HttpPost]
public ActionResult Upload(HttpPostedFileBase[] files)
{
    ViewBag.Files = files;

    return View();
}

そしてコントローラでは name 属性に指定した名前と同じ引数を追加しています。複数のファイルが飛んでくるので配列として定義してください。

実行させると以下のように複数のファイル情報が取れました。