使用 ASP.NET MVC 和 jQuery 多文件上传插件上传多文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1992874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple file upload with ASP.NET MVC & jQuery Multiple File Upload Plugin
提问by 1gn1ter
I'm using jQuery Multiple File Upload Plugin to upload several pictures. But form posts only 1, top, item. Fiddler (POST):
我正在使用 jQuery 多文件上传插件上传多张图片。但是表单只发布 1、top、item。提琴手（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
...
Here is my code:
这是我的代码：
<% 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" />
<% } %>
And controller's code:
和控制器的代码：
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");
}
Please advise me how to solve the issue. Maybe you can advise other way to let user upload several images. TIA
请告诉我如何解决这个问题。也许您可以建议其他方式让用户上传多张图片。TIA
PS. Besides html code of generated by the sript controls:
附注。除了由 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[]"/>
回答by Robert Green MBA
I found a solution. The answer was to change the HttpPostedFileBase to an IEnumerable (if you are uploading multiple files).
我找到了解决方案。答案是将 HttpPostedFileBase 更改为 IEnumerable（如果您要上传多个文件）。
I had the same problem(s) as you above. This solved my problem. Here is a good link too:Phil Haacks's post
我和你上面有同样的问题。这解决了我的问题。这里也有一个很好的链接：Phil Haacks 的帖子
回答by Mahesh
The problem was you are trying to access an array which contains same index as the POST submit is obtaining an array of files with same name.
问题是您正在尝试访问一个包含与 POST 提交相同索引的数组，该数组正在获取一个具有相同名称的文件数组。
Instead of
代替
foreach (string file in Request.Files)
{
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
use
用
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase hpf = Request.Files[i];
回答by John Deighan
In HTML5, you can upload multiple files with a single file upload field:
在 HTML5 中，您可以使用单个文件上传字段上传多个文件：
<input type="file" id="files" name="files" multiple />
In that case, your action method can be something like:
在这种情况下，您的操作方法可能类似于：
public ActionResult Index(List<HttpPostedFileBase> files) {
foreach (var file in files) {
...etc.
回答by Daniel A. White
You should be able to bind to a list.
您应该能够绑定到列表。
public ActionResult UploadImages(List<HttpPostedFileBase> file)
{
// magic
}
and your view should have
你的观点应该有
<input id="file" class="multi" type="file" accept="jpg|png" name="file" style="position: absolute; top: -3000px;"/>
回答by 1gn1ter
I've found. The 'namePattern' property should be defined in order to generate inputs with different name.
我找到了 应该定义 'namePattern' 属性以生成具有不同名称的输入。
For ex.:
例如：
<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>
Nevertheless, thank you for your help.
不过，感谢您的帮助。
回答by Meligy
I think the problem is the name file[] in the generated HTML. Clearly this si not working well from the plug-in side.
我认为问题在于生成的 HTML 中的名称 file[]。很明显，这个 si 从插件方面不能很好地工作。
Sometimes reversing the right behavior is what works. Try to remove "[]" from the name and see.
有时扭转正确的行为才是有效的。尝试从名称中删除“[]”并查看。
Actually, since you are not using the input fields by name. You can leave the name unset similar to the homepage examples of the plug-in.
实际上，因为您没有按名称使用输入字段。您可以像插件的主页示例一样不设置名称。
Give it a try.
试一试。
回答by Nestor
You can look herea solution from Phil Haack.
您可以在此处查看Phil Haack 的解决方案。
On the view
在视图上
<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>
On Controller
在控制器上
[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");
}
回答by Viorel
Posting many file with jquery ajax and .net MVC:
使用 jquery ajax 和 .net MVC 发布许多文件：
In View:
在视图中：
<input type="file" name="files" multiple class="hidden" id="inputFiles">
<button id="upload" class="btn btn-sm btn-primary" type="button">?ncarc?</button>
In js:
在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,
});
});
Controller:
控制器：
[HttpPost]
public ActionResult Upload(IEnumerable<HttpPostedFileBase> files)
{
return Content("Succesfully");
}
回答by Lakmal
view
看法
<input type="file" id="updFiles" multiple name="updFiles" />
Controller
控制器
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);
}
}
}
