如何讓jQuery的Uploadify插件與ASP.NET MVC一起使用？

Question

我正在試圖讓jQuery插件Uploadify與ASP.NET MVC一起工作。

我有顯示出來罰款與以下JavaScript插件片段：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#fileUpload').fileUpload({ 
      'uploader': '/Content/Flash/uploader.swf', 
      'script': '/Placement/Upload', 
      'folder': '/uploads', 
      'multi': 'true', 
      'buttonText': 'Browse', 
      'displayData': 'speed', 
      'simUploadLimit': 2, 
      'cancelImg': '/Content/Images/cancel.png' 
     }); 
    }); 
</script> 

這似乎是一切都很好很好。如果您注意到，「腳本」屬性設置爲my Placement/Upload，這是我的Placement Controller和我的上傳操作。

主要的問題是，我很難得到這個動作來接收文件。我已經爲該動作設置了一個斷點，並且當我選擇要上傳的文件時，它不會被執行。

我試圖改變基於關閉this article方法簽名：

public string Upload(HttpPostedFileBase FileData) 
{ 
    /* 
    * 
    * Do something with the FileData 
    * 
    */ 
    return "Upload OK!"; 
} 

但是，這仍然不火。

任何人都可以幫我寫，並正確獲取上傳控制器操作的簽名，所以它實際上會觸發？然後我可以自己處理文件數據。我只需要一些幫助讓方法動作觸發。

Answer 1

public string Upload(HttpPostedFileBase FileData) {} 

是否正確 - uploadify上傳的文件將被綁定到FileData。無需進入Request.Files來檢索文件 - 這使得模擬和測試變得更加困難。

如果你的動作根本沒有觸發（即嘗試調試並查看方法中的斷點是否被命中），那麼你的問題很可能是'腳本'值 - 你是否在虛擬目錄下運行？如果是這樣，你需要把目錄的名字放在前面。 Uploadify使用絕對路徑。

即「腳本： '/ virtual_directory /定位/上傳'

現在uploadify被髮送到http://localhost/Placement/Upload。

也嘗試使用路由調試器（http://haacked.com/archive/2008/03/13/url-routing-debugger.aspx）來檢查您的路由映射到的位置。

Answer 2

這不是我如何實現文件上傳。我有一個沒有參數的操作方法，它使用當前的Request對象來深入發佈文件的集合。

一些示例代碼從我的實現：

[AcceptVerbs(HttpVerbs.Post)] 
public ContentResult Upload() { 
    if (Request.Files.Count > 0 && Request.Files[0].ContentLength > 0) { 
     HttpPostedFileBase postedFile = Request.Files[0]; 
     // Do something with it 
    } 
} 

當然，編寫測試此成爲PITA。你必須嘲笑，爲了得到它的工作，例如幾個對象：

var mockHttpContext = mocks.StrictMock<HttpContextBase>(); 
var mockRequest = mocks.StrictMock<HttpRequestBase>(); 
var postedFile = mocks.StrictMock<HttpPostedFileBase>(); 

var postedFileKeyCollection = mocks.StrictMock<HttpFileCollectionBase>(); 

mockHttpContext.Expect(x => x.Request).Return(mockRequest).Repeat.Any(); 
mockRequest.Expect(x => x.Files).Return(postedFileKeyCollection).Repeat.Any(); 

postedFileKeyCollection.Expect(x => x[0]).Return(postedFile).Repeat.Any(); 
postedFileKeyCollection.Expect(x => x.Count).Return(1); 

postedFile.Expect(f => f.ContentLength).Return(1024); 
postedFile.Expect(f => f.InputStream).Return(null); 

這將是更容易地創建一個接口到發佈文件，只嘲笑，與一個具體的實現使用注入到你的控制器國際奧委會。

我認爲這在很大程度上是基於關閉這個帖子：Implementing HTTP File Upload with ASP.NET MVC including Tests and Mocks

Answer 3

閱讀文檔，它看起來就像是發送文件的數組。您是否嘗試過：

public string Upload(HttpPostedFileBase[] fileData) 

這也有可能是默認的模型綁定不會與HttpPostedFileBase工作，你要麼需要使用Rory的機制或編寫自己的模型粘合劑。

Answer 4

問題可能是您需要指定您正在上傳的操作已設置爲「發佈」......它不會將該操作用作「獲取」操作。

所以，這樣的：

public string Upload(HttpPostedFileBase FileData) 
{ 
    //do something 
} 

應該是這樣的：

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult Upload(HttpPostedFileBase FileData) 
{ 
    //do something 
} 

此外，要知道，如果你是在一個「登錄」網站的部分用這個，你應該採取看看這裏有一個已知的bug uploadify和認證：http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp.net-mvc.aspx

另外，只是旁邊，有幾種方法在MVC處理文件上傳（使用Request.Files根據Rory Fitzp atrick的建議，以及在動作定義中將HttpPostedFileBase文件作爲參數傳遞）。爲了使Uploadify正常工作應該不重要。

Answer 5

我的完整解決方案可能會解決您的問題。希望能幫助到你。

http://zootfroot.blogspot.com/2010/12/mvc-file-upload-using-uploadify-with.html

Answer 6

這裏是我的簡單的Razor視圖（佈局主擁有的Javascript包）

@{ 
ViewBag.Title = "Upload Email CSV"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<script type="text/javascript" src="@Url.Content("~/Scripts/Uploadify/jquery.uploadify.js")"></script> 

<script type="text/javascript"> 

$(function() { 
    var uploadUrl = "@Url.Content("~/UploadFile/UploadEmailCSV/")"; 
    var uploadSWF = "@Url.Content("~/Scripts/Uploadify/uploadify.swf")"; 
    var uploadifyButtonImage = "@Url.Content("~/Scripts/Uploadify/uploadify.swf")"; 

    $('#file_upload').uploadify({ 
     'fileSizeLimit': '0', 
     'buttonImage': '/uploadify/browse-btn.png', 
     'swf': uploadSWF, 
     'uploader': uploadUrl, 
     'onUploadSuccess': function(file, data, response) { 
      alert('The file was saved to: ' + data); 
     } 
    }); 
}); 
</script> 
<h2>Upload a comma separated list of email addresses</h2> 
@using (Html.BeginForm("UploadEmailCSV", "UploadFile", FormMethod.Post, new { @class = "form-horizontal", @enctype = "multipart/form-data", @id = "frmUploadFiles" })) 
{ 
    <input type="file" name="file_upload" id="file_upload" /> 
} 

這裏是位指示方法

public ActionResult UploadEmailCSV() 
    { 
     var uploadedFile = Request.Files["Filedata"]; 

     if (uploadedFile != null && uploadedFile.ContentLength > 0) 
     { 
      var filePath = Path.Combine(Server.MapPath("~/UploadedFiles"), string.Format("{0}_{1}{2}", Path.GetFileNameWithoutExtension(uploadedFile.FileName), DateTime.Now.Ticks, Path.GetExtension(uploadedFile.FileName))); 
      uploadedFile.SaveAs(filePath); 
      return Content(string.Format("{0}_{1}{2}", Path.GetFileNameWithoutExtension(uploadedFile.FileName), DateTime.Now.Ticks, Path.GetExtension(uploadedFile.FileName))); 

     } 
     return Content("Error Uploading file!"); 
    } 

完蛋了！