多个文件上传与ASP.NET MVC＆jQuery多文件上传插件

Question

我使用jQuery多文件上传插件上传多张图片。但表格帖子只有1，顶部，项目。菲德勒（POST）：

POST /Images/UploadImages HTTP/1.1 
Host: localhost:4793 
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip,deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Keep-Alive: 300 
Connection: keep-alive 
Referer: http://localhost:4793/images 
Cookie: .ASPXAUTH=EFAC4E03FA49056788028048AE1B099D3EB6D1D61AFB8E830C117297471D5689EC52EF40C7FE2CEF98FF6B7C8CAD3AB741A5E78F447AB361A2BDD501331A88C7B75120611CEA4FECA40D972BB9401472 
Content-Type: multipart/form-data; boundary=---------------------------1509898581730 
Content-Length: 290022 

-----------------------------1509898581730 
Content-Disposition: form-data; name="album" 

1 
-----------------------------1509898581730 
Content-Disposition: form-data; name="file[]"; filename="Blue hills.jpg" 
Content-Type: image/jpeg 

... 

这里是我的代码：

<% using (Html.BeginForm("UploadImages", "Images", FormMethod.Post, new { enctype = "multipart/form-data"})) 
     {%> 

    <%= Html.DropDownList("album", (IEnumerable<SelectListItem>)ViewData["Albums"])%> 
     <br />  
    <input type="file" name="file[]" id="file" class="multi" accept="jpg|png" /> 
     <br /> 
    <input type="submit" name="submit" value="Submit" /> 

    <% } %> 

和控制器代码：

public ActionResult UploadImages(FormCollection formValue) 
    {   
     foreach (string file in Request.Files) 
     { 
      HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase; 
      if (hpf.ContentLength == 0) 
       continue; 

      //do something with file 
     } 
     return RedirectToAction("Index"); 
    } 

请告诉我如何解决这个问题。也许你可以建议其他方式让用户上传多张图片。 TIA

PS。除了由sript控件生成的HTML代码：

<input id="file" class="multi" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/> 
<input id="file_F1" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/> 
<input id="file_F2" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/> 
<input id="file_F3" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/> 
<input id="file_F4" class="multi MultiFile" type="file" accept="jpg|png" name="file[]"/> 

Answer 1

我认为这个问题是在生成的HTML的文件名[]。显然这从插件方面来说工作得不好。

有时逆转正确的行为是有效的。尝试从名称中删除“[]”并查看。

实际上，因为您没有按名称使用输入字段。您可以将名称解除设置，类似于插件的主页示例。

试试看。

Answer 2

你应该能够绑定到一个列表。

public ActionResult UploadImages(List<HttpPostedFileBase> file) 
{ 
// magic 
} 

和你的看法应该有

<input id="file" class="multi" type="file" accept="jpg|png" name="file" style="position: absolute; top: -3000px;"/> 

Answer 3

我发现。应该定义'namePattern'属性以便生成具有不同名称的输入。

对于前：

<input type="file" accept="gif|jpg|jpeg|png" /> 


<script language="javascript" type="text/javascript"> 
     $(document).ready(function() { 
      $i = (1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20); 
      $(':file').MultiFile({ namePattern: '$name_$i', maxlength: 20 }); 
     }); 
</script> 

尽管如此，感谢你的帮助。

Answer 4

问题是您正在尝试访问包含与POST相同索引的数组提交正在获取具有相同名称的文件数组。

而不是

foreach (string file in Request.Files) 
{ 
     HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase; 

使用

for (int i = 0; i < Request.Files.Count; i++) 
{ 
     HttpPostedFileBase hpf = Request.Files[i]; 

Answer 5

我找到了解决办法。答案是将HttpPostedFileBase更改为IEnumerable（如果您正在上传多个文件）。

我和你上面有同样的问题。这解决了我的问题。这里也是一个很好的链接：Phil Haacks's post

Answer 6

你可以look here菲尔哈克解决方案。

在视图

<form action="" method="post" enctype="multipart/form-data"> 

    <label for="file1">Filename:</label> 
    <input type="file" name="files" id="file1" /> 

    <label for="file2">Filename:</label> 
    <input type="file" name="files" id="file2" /> 

    <input type="submit" /> 
</form> 

在控制器

[HttpPost] 
public ActionResult Index(IEnumerable<HttpPostedFileBase> files) { 
    foreach (var file in files) { 
    if (file.ContentLength > 0) { 
     var fileName = Path.GetFileName(file.FileName); 
     var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName); 
     file.SaveAs(path); 
    } 
    } 
    return RedirectToAction("Index"); 
} 

Answer 7

在HTML5中，你可以用一个单一的文件上传字段上传多个文件：

<input type="file" id="files" name="files" multiple /> 

在这种情况下，你的动作方法可以是这样的：

public ActionResult Index(List<HttpPostedFileBase> files) { 

foreach (var file in files) { 
    ...etc. 

Answer 8

视图

<input type="file" id="updFiles" multiple name="updFiles" /> 

控制器

if (Request.Files != null && Request.Files.Count > 0) 
{  
    for (int i = 0; i < Request.Files.Count; i++) 
    { 
     HttpPostedFileBase file = Request.Files[i]; 
     if (file != null && file.ContentLength > 0) 
     { 
      var fileName = Path.GetFileName(file.FileName); 
      //store 
      var path = Path.Combine(Server.MapPath("~/App_Data/Uploads"), fileName); 
      file.SaveAs(path); 
     } 
    } 
} 

Answer 9

发布使用jQuery Ajax和.NET MVC许多文件：

在View：

 <input type="file" name="files" multiple class="hidden" id="inputFiles"> 
     <button id="upload" class="btn btn-sm btn-primary" type="button">Încarcă</button> 

在JS：

var btnUpload = $("#upload"); 
var inputFiles = $('#inputFiles'); 

    btnUpload.click(function() { 
    inputFiles.trigger('click'); 
}); 

inputFiles.on('change', function() { 
    var formData = new FormData(); 

    for (var i = 0; i < inputFiles[0].files.length; i++) 
     formData.append("files[" + i + "]", inputFiles[0].files[i]) 

    $.ajax({ 
     url: window.baseUrl + "Archivator/Upload", 
     type: "POST", 
     contentType: "application/json, charset=utf-8", 
     dataType: "json", 
     data: formData, 
     processData: false, 
     contentType: false, 
    }); 
}); 

控制器：从文件

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

     return Content("Succesfully"); 
    }