Jquery 如何在ASP.NET MVC中处理HTML5多文件上传？

我发现了一个例子，其中解释了如何使用新的HTML5 FormData API通过AJAX/Jquery上传文件

下面是该代码的稍微更新版本，使用了较新的JQuery 1.8+语法

$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: '/Upload',  //my ASP.NET MVC method
        type: 'POST',
        // handle the progress report
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction,    false); // For handling the progress of the upload
            }
            return myXhr;
        },

        // Form data
        data: formData,

        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    })
    .done(function(){
        alert("success");
    })
    .fail(function(){
        alert("error");
    });
});

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

这是表格

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

这很有效。直到您决定在“文件”对话框中使用“多个”属性并发送多个文件

<form enctype="multipart/form-data">
    <input name="file" type="file" multiple="multiple" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

甚至不编译

你猜怎么着？不起作用。让我们尝试处理Request.Files。好的可靠的旧请求文件。永不失败

public string Upload()
{
    foreach (HttpPostedFileBase uf in Request.Files)
         ...
}

剧透警报：它不起作用

public string Upload(IEnumerable files)
{
    foreach(var file in files)
         ...
}

啊哈。知道了！我将迭代Request.Files中的键

public string Upload()
{
    foreach(var key in Request.Files.AllKeys)
    {
        var file = Request.Files[key];
    }
}

然而，它还是不起作用

下面是始终可靠、头发蓬乱的瑞克·斯特拉尔的作品

public string Upload(IEnumerable files)
{
    foreach(var file in files)
         ...
}

public string Upload()
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        var file = Request.Files[i];
    } 
}

公共字符串上传（）
{
对于（int i=0；i

这背后的原因是传递给

Request.files

的文件集合都具有相同的名称，因为它们来自单一的文件上载对话框

服务器端方法被传递给包含文件的单个对象，出于某种原因，Request.files是获取它的唯一方法

---

希望我把这个加进去能帮别人省去一点头疼

在我的例子中，对我有效的是将所有文件绑定到ViewModel字段。ViewModel将是我用于前端的模型

@using School.ViewModels
@model UserProfileViewModel


<form enctype="multipart/form-data">
<input id="username"name="username" type="text" />
<input name="Myfiles" type="file" multiple="multiple" />
<input type="button" value="Upload" />
</form>

---

文件类型如何？我想允许用户上传类型为

“.jpg”、“.gif”、“.png”

的文件。。。但是既然所有文件都有相同的名称，那么我怎么才能得到任何文件的类型呢？您仍然可以访问文件名，但是包含这些文件的所有post变量都有相同的名称。将文件分配给

file

变量后，可以检查名称和扩展名，并对其进行筛选。

public string Upload()
{
    foreach(var key in Request.Files.AllKeys)
    {
        var file = Request.Files[key];
    }
}

public string Upload()
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        var file = Request.Files[i];
    } 
}

@using School.ViewModels
@model UserProfileViewModel


<form enctype="multipart/form-data">
<input id="username"name="username" type="text" />
<input name="Myfiles" type="file" multiple="multiple" />
<input type="button" value="Upload" />
</form>

namespace School.ViewModels
{
    public class UserProfileViewModel
    {
        public long Username { get; set; }

        public List<HttpPostedFileBase> Myfiles { get; set; }
    }
}

public ActionResult Create([Bind(Include="Username,Myfilese")] UserprofileViewModel userprofileViewModel)
{
     var files = userprofileViewModel.Myfiles;
     foreach(HttpPostedFileBase file in files)
     {
         //do something here
     }
}