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

我正在尝试使用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和我的上传操作。

主要的问题是，我很难得到这个动作来接收文件。 我已经设置了一个断点，当我select一个file upload，它没有得到执行。

我试着改变基于这篇文章的方法签名：

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

但是，这仍然不会起火。

任何人都可以帮我写，并正确地获得上传控制器行动的签名，所以它会实际上火吗？ 然后我可以自己处理文件数据。 我只需要一些帮助让方法行动起来。

Answer 1

 public string Upload(HttpPostedFileBase FileData) {} 

是正确的 – uploadify上传的文件将被绑定到FileData。 无需进入Request.Files来检索文件 – 这使得它更难以模拟和testing。

如果你的动作根本没有触发（即尝试debugging，看看方法中的断点是否被命中），那么你的问题很可能是'脚本'值 – 你是否在虚拟目录下运行？ 如果是这样，你需要把目录的名字放在前面。 Uploadify使用绝对path。

即'脚本：'/ virtual_directory / Placement / Upload'

现在uploadify发送到http：// localhost / Placement / Upload 。

也请尝试使用路由debugging器（ http://haacked.com/archive/2008/03/13/url-routing-debugger.aspx ）来检查您的路由映射到的位置。

Answer 2

问题可能是您需要指定您正在上传的操作被设置为“发布”…它不会将该操作用作“获取”操作。

所以这：

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

应该是这样的：

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

此外，请注意，如果您在网站的“已login”部分使用此function，则应该查看一下已知的uploadify和身份validation错误： http ://geekswithblogs.net/apopovsky/archive/2009/ 05 / /工作周围快闪cookie的错误-在- asp.net-mvc.aspx

另外，在MVC中，有几种方法可以处理file upload（按照Rory Fitzpatrick的build议使用Request.Files，并在动作定义中将HttpPostedFileBase文件作为parameter passing）。 为了使Uploadify正常工作应该没有关系。

Answer 3

这不是我必须实现file upload。 我有一个没有参数的操作方法，它使用当前的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 } } 

当然，为此编写testing成为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); 

在发布的文件中创build一个接口会比较容易，只是模拟一个使用IoC注入控制器的具体实现。

我认为这主要是基于这个职位： 与ASP.NET MVC实现HTTPfile upload，包括testing和模拟

Answer 4

我的完整解决scheme可能会解决您的问题。 希望能帮助到你。

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

Answer 5

阅读文档，它看起来像是发送一个文件的数组。 你有没有尝试过：

 public string Upload( HttpPostedFileBase[] fileData ) 

也可能默认的模型绑定器不能和HttpPostedFileBase一起工作，你需要使用Rory的机制或者编写你自己的模型绑定器。

Answer 6

这里是我的简单剃刀视图（布局大师有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" /> } 

这是Contoller方法

 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!"); } 

而已！