ASP.NET MVCで単一のファイルアップロードの問題を持つ複数のファイル

Question

私は複数のファイルを選択できる1つのファイルアップロードを持っています。しかし、サーバー側は、サブミットをクリックすると最後の選択しか受け付けません。たとえば、初めて2枚の画像を選択し、次に3枚の画像を選択し、合計で5枚の画像を選択します。送信後、サーバーは最後の3つの画像しか捕捉しません。私の考えは、すべての画像を1つの隠された入力に置き、サーバーは隠された入力からデータを取得します。しかし、私はそれらを隠された入力に置く方法を知らない。

私の質問は、隠された入力にデータイメージを置く方法ですか？

Answer 1

実際のファイル入力を複製することができます。ここでは例です：

モデル：

public class MyViewModel 
{ 
    public IEnumerable<HttpPostedFileBase> Files { get; set; } 
} 

コントローラー：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(new MyViewModel()); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return View(model); 
    } 
} 

ビュー：

@model MyViewModel 

<script type="text/javascript"> 
    $(function() { 
     $(':file').change(function() { 
      if (this.files.length > 0) { 
       var real = $(this); 
       var cloned = real.clone(true); 
       real.hide(); 
       cloned.insertAfter(real); 
       real.appendTo('form'); 
      } 
     }); 
    }); 
</script> 

@Html.TextBoxFor(x => x.Files, new { type = "file", multiple = "multiple", value = "", id = (string)null }) 

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    <button type="submit">Upload</button> 
} 

アイデアは、元のファイルの入力はフォームの外にあるということです。その後、ユーザーがファイル選択を実行するたびに、フィールドをクローンし、それを隠しファイル入力としてフォームに挿入します。フォームが送信されると、すべてのファイルがサーバーにアップロードされます。

さらにスクリプトを改善すると、明らかに、サーバーにアップロードされるファイルの数をユーザーに視覚的に示すことができます。