使用MVC 3的Ajax方式上传文件

Question

也许只是我自己的问题，但我正在尝试使用jQuery对话框来捕获用户想要上传的文件。这必须得到IE9的支持。IE9不支持FormData对象，这在许多示例和第三方工具中被使用。所以为了使我的请求不刷新整个页面，我必须将我的上传放入一个iFrame中？真的吗？我知道我可以得到一些Flash上传器，但Flash在我们的网站上不受支持，所以现在不考虑它。

请...请有人告诉我我做错了什么，有更简单的方法，因为我似乎找不到任何一个能在IE9上工作的方法。

表格

<form action="/ControllerName/ActionName" method="post" enctype="multipart/form-data">
    <label for="file">Filename:</label>
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="Submit" />
</form> 

然后像这样将其嵌入到iFrame中：

<iframe src="myUrl"></iframe>

- Four_0h_Three

---

使用iFrame有什么问题吗？如果将其放置在lightbox/dialog中，用户无法区分。 - Spencer Ruport

@SpencerRuport 这种做法对我来说感觉很粗糙，应该有更好的方法来解决。 - Four_0h_Three

应该是这样的。但作为开发人员，我们只是浏览器战争的受害者。 - Spencer Ruport

使用Ajax.BeginForm实现ajax化表单怎么样？http://msdn.microsoft.com/zh-cn/library/system.web.mvc.ajax.ajaxextensions.beginform.aspx - Mathew Thompson

@mattytommo 我试过第一种方法。Ajax对象不支持文件上传 :( 然后我尝试使用普通表单，序列化它并使用ajax传递数据，但也不起作用。我相当确定这是由于HTTP在多部分帖子中传输文件的方式所致。 - Four_0h_Three

Answer 1

视图：

@using (Html.BeginForm("FileUpload","Message",FormMethod.Post,new { enctype="multipart/form-data"})) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Message</legend>

//your html here

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

    </fieldset>

控制器：

[HttpPost]
        public ActionResult FileUpload(FormCollection values, IEnumerable<HttpPostedFileBase> files)
        {
             //do what you want with form values then for files

           foreach (var file in files)
            {
                if (file.ContentLength > 0)
                {
                    byte[] fileData = new byte[file.ContentLength];
                    file.InputStream.Read(fileData, 0, file.ContentLength);

                   //do what you want with fileData
                }
            }
        }

我提供多文件上传，因此我使用

IEnumerable<HttpPostedFileBase> files 

如果您只想要一个单独的文件，则只需使用

HttpPostedFileBase file  

并且在您的视图中将输入类型更改为

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

就是这么简单。

编辑：

看看更多好的例子：

http://www.strathweb.com/2012/04/html5-drag-and-drop-asynchronous-multi-file-upload-with-asp-net-webapi/

http://css.dzone.com/articles/implementing-html5-drag-drop

敬礼

- Matija Grcic

---

我发誓我之前在某个地方看到过这个解决方案并尝试过。但是为了自娱自乐，我又试了一遍。我在这里遇到的问题是“files”返回为空。我也尝试过去掉IEnumerable，只留下文件，但仍然没有成功... 仍然为空。 - Four_0h_Three

由于问题是关于通过Ajax向服务器进行异步调用，因此Html.BeginForm将无法帮助。 - SaravananArumugam

我知道这是很久以前的事情了，但最终我使用了一个iFrame来解决问题。 - Four_0h_Three

这个答案与ajax有什么关系？ - ProfK