Asp.net MVC:上传多个图片文件?

url*_*der 17 asp.net-mvc file-upload image-uploading asp.net-mvc-4

是否有一个很好的例子,说明如何在asp.net mvc上传多个图像文件?我知道我们可以使用HttpPostedFileBase上传一个文件.有没有办法通过单击一个按钮上传多个文件?

我之前在webform中的ajaxtoolbox中使用了文件上传,并且喜欢它的工作原理.在MVC中有类似的方式吗?或者,是否有现成的控制可以很好地做到这一点?自由控制更好,但即使它花费一些$也可以.

谢谢

Fel*_*ani 25

您可以使用POSThttp动词实现一个动作,该动作接收一个集合HttpPostedFileBase并保存所有文件,对于示例:

[HttpPost]
public ActionResult Upload(IEnumerable<HttpPostedFileBase> files) 
{
    foreach (var file in files)
    {
        file.SaveAs(Server.MapPath("~/Update/" + file.FileName));
    }

    return View();
}
Run Code Online (Sandbox Code Playgroud)

或者,你可以阅读Request.Files并做同样的工作,

[HttpPost]
public ActionResult Upload() 
{
    foreach (var file in Request.Files)
    {
        file.SaveAs(Server.MapPath("~/Update/" + file.FileName));
    }

    return View();
}
Run Code Online (Sandbox Code Playgroud)

也可以看看


ale*_*eha 5

使用这个jQuery插件

只需包含插件js文件,创建标签:

<input type='file' multiple id='fileUpload' name="files[]" data-url="@Url.Action("Upload","Home")" />
Run Code Online (Sandbox Code Playgroud)

(IE9除外,它不允许在选择对话框中选择多个文件)

添加一些JavaScript:

$(function () {
    $('#fileUpload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

在控制器操作中,只需检查Request.Files并执行任何操作.这是一份很好的文档

[HttpPost]
public JsonResult Upload() 
{
    foreach (var file in Request.Files)
    {
        if(file.ContentLength > 0)
        {
            file.SaveAs(Server.MapPath("~/Upload/" + file.FileName));
        }
    }

    return Json(new { result = true });
}
Run Code Online (Sandbox Code Playgroud)