使用ajax表單的mvc3文件上傳 - Request.Files爲空

Question

我使用mvc3，並試圖在單個頁面內創建一系列每個都上傳文件的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();"/> 

然後轉到（）函數通過Ajax的形式循環，檢查看所有3個（dressid，dresscaption和的FileItem）每份表格上是否有非空，和通話提交表單，啓動異步上傳。

這裏的局部視圖：

@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" />  
} 

我已標記的每個形式與多屬性。當生成頁面，我得到如下：

<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上傳文件。所以用正常的Html.BeginForm代替Ajax.BeginForm。您也可以結賬following blog post。

如果你想使用異步上傳，你可以嘗試一些可用的上傳組件，如Ajax Upload和Uploadify。

Answer 2

首先，我不知道爲什麼你有這三次。

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

你想上傳多個文件嗎？有相當多的腳本可以讓你非常有效地做到這一點。您還將生成包含相同ID的字段的多個表單。這不會影響上傳過程，但這是不好的做法。我認爲你需要重構上述內容。在您的局部視圖反正更改領域

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

我認爲問題可能與你的實際行動和你如何試圖檢索文件。試試這個

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

讓我知道這是否有效。