javascript - jQuery 将带有 ajax 的文件发送到 MVC Controller

Question

我正在尝试使用 jQuery 将文件发送到我的 MVC Controller ，但该操作一直收到空 HttpPostedFileBase 参数。

HTML:

<input type="file" name="file" id="file" />
<input type="submit" name="submit" id="upload" value="Submit"/>

jQuery:

$(function () {
    $('#upload').click(function () {

        var data = new FormData($('#file')[0].files[0]);

        $.ajax({
            url: '@Url.Action("Upload", "Home")',
            type: 'POST',
            data: data,
            cache: false,
            contentType: false,
            processData: false
        });
    });
});

Controller :

[HttpPost]
public virtual ActionResult Upload(HttpPostedFileBase file)
{
    // file = null
}

新的 FormData($('#file')[0].files[0]):

__proto__: FormData

$('#file')[0].文件[0]:

lastModified: 1445429215528
lastModifiedDate: Wed Oct 21 2015 14:06:55 GMT+0200 (Central Europe Daylight Time)
name: "Google_Chrome_logo_2011.jpg"
size: 5506
type: "image/jpg"
webkitRelativePath: ""
__proto__: File

我几乎复制了我在 Internet 上找到的其他示例的代码，但不知何故它无法正常工作。

Answer 1

试试这个:

if (Request.Files.Count > 0)
{
   foreach (string file in Request.Files)
   {
      var _file = Request.Files[file];
   }
}

更新

var $file = document.getElementById('file'),
    $formData = new FormData();

if ($file.files.length > 0) {
   for (var i = 0; i < $file.files.length; i++) {
      $formData.append('file-' + i, $file.files[i]);
   }
}

$.ajax({
   url: '/home/upload',
   type: 'POST',
   data: $formData,
   dataType: 'json',
   contentType: false,
   processData: false,
   success: function ($data) {

   }
 });