ajaxフォームを使用したmvc3ファイルのアップロード - Request.Files empty

Question

mvc3を使用していて、それぞれが1ページ内にファイルをアップロードする一連のajaxフォームを作成しようとしています。ここでは、ページの表示があります：

@{ 
    ViewBag.Title = "Index"; 
} 
<h2> 
    Index</h2> 

    @Html.Partial("_UploadItem") 
    @Html.Partial("_UploadItem") 
    @Html.Partial("_UploadItem") 

<script type="text/javascript"> 
    function Go() { 
     // loop through form tags 
     for (var n = 0; n < document.forms.length; n++) { 
      var f = document.forms[n]; 
      // if a dress is chosen, a caption is chosen 
      // and a file is chosen, then submit the ajax form 
      if (f.dressid.value != '' && 
       f.dresscaption.value != '' && 
       f.fileitem.value != '') 
       f.submit(); 
     } 
    } 
</script> 
<input type="button" onclick="Go();"/> 

その後ゴー（）関数は、各フォーム上のすべての3枚（dressid、dresscaption、およびfileitem）が非空であるかどうかをチェックし、Ajaxのフォームをループし、コールはフォームを送信し、非同期アップロードを開始します。私はマルチパート属性で各フォームをマークしている

@using SoRefeising.Models 
@using (Ajax.BeginForm("UploadFile", new { }, new AjaxOptions { HttpMethod = "POST" }, new { enctype="multipart/form-data"})) 
{ 
    List<SelectListItem> items = (List<SelectListItem>)ViewBag.Dresses; 

    <span>Dress</span> 
    @Html.DropDownList("dressid", items, "Choose Dress"); 
    <span>Caption</span> 
    @Html.TextBox("dresscaption") 
    <input type="file" id="fileitem" />  
} 

：

はここで部分図です。ページが生成されると、私は次を得る：すべてがOKに見える

<form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form0" method="post"> <span>Dress</span> 
<select id="dressid" name="dressid"><option value="">Choose Dress</option> 
<option value="1">Simpson01</option> 
<option value="2">Simpson02</option> 
</select> <span>Caption</span> 
<input id="dresscaption" name="dresscaption" type="text" value="" /> <input type="file" id="fileitem" />  
</form> 

    <form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form1" method="post"> <span>Dress</span> 
<select id="dressid" name="dressid"><option value="">Choose Dress</option> 
<option value="1">Simpson01</option> 
<option value="2">Simpson02</option> 
</select> <span>Caption</span> 
<input id="dresscaption" name="dresscaption" type="text" value="" /> <input type="file" id="fileitem" />  
</form> 

    <form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form2" method="post"> <span>Dress</span> 
<select id="dressid" name="dressid"><option value="">Choose Dress</option> 
<option value="1">Simpson01</option> 
<option value="2">Simpson02</option> 
</select> <span>Caption</span> 
<input id="dresscaption" name="dresscaption" type="text" value="" /> <input type="file" id="fileitem" />  
</form> 

...

ここでアクションが呼び出された

[HttpPost] 
     public ActionResult UploadFile(string dressid, string dresscaption) 
     { 
       HttpPostedFileBase hpf = Request.Files[0] as HttpPostedFileBase; 
... 

、リクエストと呼ばれ、コントローラのアクションです.Filesコレクションには、選択したファイルではなく、0個のアイテムがあります。私は目立たないjavascriptを有効にしています。控えめなファイルはマスターページに読み込まれ、他のページでも動作します。

ファイルサイズに注意することについてフォーラムでメッセージが表示されました。私がテストしているファイルは<です。2k

Request.Filesに項目が存在しない理由は何ですか？あなたはこの三回を持っている理由は、すべての

Answer 1

AJAXを使用してファイルをアップロードすることはできません。したがって、Ajax.BeginFormを通常のHtml.BeginFormに置き換えてください。 following blog postもチェックアウトすることができます。

非同期アップロードを使用する場合は、Ajax UploadやUploadifyなどの利用可能なアップロードコンポーネントを試してみてください。

Answer 2

まず

おかげで、私はわかりません。

複数のファイルをアップロードしようとしていますか？これを非常に効率的に行うためのスクリプトがかなりあります。また、同じIDを含むフィールドを持つ複数のフォームを生成しています。これはアップロードプロセスには効果がありませんが、悪い習慣です。私は上記をリファクタリングする必要があると思います。とにかく、私は問題はあなたの実際の行動とどのようにファイルを取得しようとしているとかもしれないと思う

<input type="file" name="file" /> 

にあなたの部分図のフィールドを変更します。試してみてください

HttpPostedFileBase postedFile = Request.Files["file"]; 

これが機能するかどうか教えてください。