Asp.net MVC：上传多个图像文件？

Posted 2023-03-22

【中文标题】Asp.net MVC：上传多个图像文件？

【英文标题】：Asp.net MVC: upload multiple image files?

【发布时间】：2014-11-04 11:58:11

【问题描述】：

有没有一个如何在asp.net mvc中上传多个图像文件的好例子？我知道我们可以使用 HttpPostedFileBase 上传一个文件。有没有办法通过单击一个按钮上传多个文件？

我之前在 webform 的 ajaxtoolbox 中使用过文件上传，并且喜欢它的工作原理。 MVC中有类似的方法吗？或者，是否有现有的控件可以很好地做到这一点？免费控制更好，但即使花费一些也可以。

谢谢

【问题讨论】：

我们在上一份工作中使用plupload.com 进行多次上传

有没有一个简单的例子说明如何在asp.net MVC中使用它？谢谢。

我无法再访问该代码库了。这是我在谷歌上搜索到的一个例子pluploadmvc4demo.codeplex.com

【参考方案1】：

您可以使用POST http 动词实现一个操作，以接收HttpPostedFileBase 的集合并保存所有文件，例如：

[HttpPost]
public ActionResult Upload(IEnumerable<HttpPostedFileBase> files) 

    foreach (var file in files)
    
        file.SaveAs(Server.MapPath("~/Update/" + file.FileName));
    

    return View();

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

[HttpPost]
public ActionResult Upload() 

    foreach (var file in Request.Files)
    
        file.SaveAs(Server.MapPath("~/Update/" + file.FileName));
    

    return View();

另见

Single File Upload to Multiple File Upload in MVC Uploading a File (Or Files) With ASP.NET MVC

【讨论】：

非常感谢您提供的链接，这对我很有帮助

我尝试上传 396 个 csv 文件，它工作正常，但是当我尝试上传 484 个文件时，它不再工作了，我错过了什么？我已经根据site

编辑了 web.config

【参考方案2】：

使用这个jQuery plugin

只包含插件js文件，创建标签：

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

（除了 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);
            );
        
    );
);

在控制器操作中，只需检查 Request.Files 并做任何你想做的事情。 这是一个很好的documentation

[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 );

【讨论】：

使用这个插件，一个基本的例子可以在这里找到：github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

【参考方案3】：

我正在使用这个。 https://www.fyneworks.com/jquery/multiple-file-upload/

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

[HttpPost] 
public ActionResult Upload()  

    if (Request.Files.Count > 0)
    
          foreach(var file in Request.Files)   
    

    return View(); 

【参考方案4】：

文件上传所需的一些基本位

注意关键字：multiple 在输入元素中 AND multipart 在表单元素中

html 端

@using (Html.BeginForm("MyUpload", "MyController", FormMethod.Post, new  enctype = "multipart/form-data" ))  
    <input type="file" name="myFiles" multiple />
    <button class="btn btn-default">Upload</button>   

---

控制器

[HttpPost]
public ActionResult MyUpload(IEnumerable<HttpPostedFileBase> myFiles)

    foreach (var file in myFiles)
    
        if (file != null && file.ContentLength > 0)
        
            //handle files;
        
    
    return View();