web-dev-qa-db-ja.com

1つのフォームで複数のファイルをアップロードするMVC4

1つのフォームに複数の画像をアップロードしようとしています

@using (Html.BeginForm("Create", "AdminRestaurants", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="form-group">
    <label for="logoFile" class="col-sm-2 control-label">Logo:</label>
    <div class="col-sm-6">
        <input type="file" multiple="" name="logoFile" id="logoFile" />
    </div>
</div>
<div class="form-group">
    <label for="fohFile" class="col-sm-2 control-label">FOH Logo:</label>
    <div class="col-sm-6">
        <input type="file" multiple="" name="fohFile" id="fohFile" />
    </div>
</div>
<div class="form-group">
    <label for="bohFile" class="col-sm-2 control-label">BOH Logo:</label>
    <div class="col-sm-6">
        <input type="file" multiple="" name="bohFile" id="bohFile" />
    </div>
</div>
<div class="form-group">
    <label for="mgmFile" class="col-sm-2 control-label">MGM Logo:</label>
    <div class="col-sm-6">
        <input type="file" multiple="" name="mgmFile" id="mgmFile" />
    </div>
</div>

これでコントローラーのフォームを処理しようとしています

public ActionResult Create(IEnumerable<HttpPostedFileBase> files, RestaurantModel collection)
{
    if (ViewData.ModelState.IsValid)
    {
    }
}

現在、コントローラーのfiles署名には何も表示されません。これは、1つのファイルのみを操作する場合にうまく機能するようです

public ActionResult Create(HttpPostedFileBase file, EventsModel collection)

1つの送信フォームで複数のファイルをアップロードできるようにする方向を誰かに教えてもらえますか？

c#asp.net-mvcasp.net-mvc-4file-upload
10
Jon Harding

問題は、命名規則が正しくないため、フォームがモデルバインダーがバインドできる情報を使用してPOSTリクエストを作成することです。

ご覧のとおり、それぞれ異なる名前の4つのファイルフィールドがあります。モデルバインダーがそれらを正しくバインドするには、コントローラーのアクションシグネチャは次のようになります。

public ActionResult Create(HttpPostedFileBase mgmFile, 
                           HttpPostedFileBase logoFile, 
                           HttpPostedFileBase fohFile ,
                           HttpPostedFileBase bohFile)

MCVデザインパターンに従う最良のオプションは、IEnumerable<HttpPostedFileBase>を保持するViewModelを使用し、IEnumerable<HttpPostedFileBase>のカスタムエディターテンプレートを作成することです。

あなたがそのようにそれを使うことができるように：

Html.EditorFor(m=>Model.filesUploaded)

コントローラのアクションは次のようになります。

public ActionResult Create(MyViewModel i_InputModel)
{
    i_InputModel.filesUploade; //Use the files here to upload them.
}

その他のオプションは次のとおりです：次のようにファイル入力フィールドでHTML5複数属性を使用します。

<label for="mgmFile" class="col-sm-2 control-label">Files:</label>
<div class="col-sm-6">
    <input type="file" multiple="multiple" name="files" id="files" />
</div>

そしてこのようなコントローラーアクション：

public ActionResult Create(HttpPostedFileBase files)

または、複数のファイルフィールドを使用しますが、名前でインデックスを付けます。

<input type="file" multiple="multiple" name="files[0]" id="files_1" />
<input type="file" multiple="multiple" name="files[1]" id="files_2" />
<input type="file" multiple="multiple" name="files[2]" id="files_3" />
<input type="file" multiple="multiple" name="files[3]" id="files_4" />

次に、次のようなコントローラーアクションを使用できます。

public ActionResult Create(IEnumerable<HttpPostedFileBase> files)
18
Mortalus

これは、ファイル入力にfiles[0]、files[1]、files[2]、...などのインデックス名が付いている場合にのみ機能します。

リストへのモデルバインディングがasp.netmvcでどのように機能するかを理解するために、次の投稿を読むことをお勧めします： リストへのモデルバインディング

ファイルを取得するためにモデルバインディングを使用する必要はありません。それらを取得するには、アクションでRequest.Filesを使用します。

public ActionResult Create(EventsModel collection)
{
    var files = Request.Files;
    // rest of the code...
}
3
ataravati
<td>
      <input type="file" name="files" id="files" multiple="multiple" />
      </td>

ここにあるように、私は簡単な例で示します： http://www.infinetsoft.com/Post/How-to-create-multiple-fileUpload-using-asp-net-MVC-4/1229#.V0J- yfl97I

0
Thivan Mydeen