在 ASP.net MVC 中捕获 ajax 文件上传 (html5)答案

【问题标题】：Catching ajax file upload (html5) in ASP.net MVC在 ASP.net MVC 中捕获 ajax 文件上传 (html5)
【发布时间】：2013-11-07 18:46:46
【问题描述】：

这里有什么问题？
ajax 调用未达到动作

服务器端：

    [HttpPost]
    public ActionResult UploadFile(long someID, HttpPostedFileBase myFile)
    {
        return "hello";
    }

客户端html：

<form id="my-form" method="post" action="" enctype="multipart/form-data">
     <input type="hidden" name="someID" value="156" />
     <input type="file" name="myFile" />
</form>

客户端javascript：

$.ajax({
    async: true,
    type: 'POST',
    url: '/MyController/UploadFile/',
    data: new FormData($('#my-form')),
    success: function (data) {},
    cache: false,
    contentType: false,
    processData: false
});

在某些浏览器中应该可以通过 ajax 进行这种上传。

我收到此服务器端错误：参数字典包含不可为空类型“System.Int64”的参数“someID”的空条目（...）

如果我把action改成UploadFile()，不带参数，ajax调用就进入了action，那么我该如何恢复发布的数据呢？

【问题讨论】：

这是一个安全问题，另见stackoverflow.com/questions/19267749/…
不是安全问题

标签： ajax html asp.net-mvc-4 file-upload

【解决方案1】：

好吧，最终这样做了：

服务器端：

[HttpPost]
public ActionResult UploadFile(long someID)
{
    var file = Request.Files[0];
    return "hello";
}

客户端html：

 <form method="post" action="">
     <input type="hidden" id="someID" value="156" />
     <input type="file" id="myFile" />
 </form>

客户端javascript：

var blah = new FormData();
blah.append("file", $("#myFile")[0].files[0]);

$.ajax({
    async: true,
    type: 'POST',
    url: '/MyController/UploadFile/?someID='+ $("#someID").val(),
    data: blah,
    success: function (data) {},
    cache: false,
    contentType: false,
    processData: false
});

如您所见，html 表单甚至不需要 enctype。 someID 是通过 URL 传递的，文件在 Request.Files 中被捕获

【讨论】：

效果很好。如果表单中有更多应包含在帖子中的输入字段，则可以使用new FormData($('#someFormId')[0])。这从应该发布的实际表单构造 FormData。然后你可以根据这篇文章中的描述修改那个表单数据。

【解决方案2】：

如果您想上传文件和一些其他参数，在您的场景中就是这种情况，HttpPost 处理程序只能有其他参数。然后，您可以从 Request 对象获取发送到服务器的文件。

例如：

[HttpPost]
public ActionResult UploadFile(long someID)
{
    string filename = null;
    string fileType = null;
    byte[] fileContents = null;

    if (Request.Files.Count > 0) { //they're uploading the old way
        var file = Request.Files[0];
        fileContents = new byte[file.ContentLength];
        fileType = file.ContentType;
        filename = file.FileName;
    } else if (Request.ContentLength > 0) {
        fileContents = new byte[Request.ContentLength];
        Request.InputStream.Read(fileContents, 0, Request.ContentLength);
        filename = Request.Headers["X-File-Name"];
        fileType = Request.Headers["X-File-Type"];
    }
    //Now you have the file, continue with processing the POST request 
    //...
}

这个示例来自link，我发现它对我在 MVC 的第一步很有帮助。

【讨论】：