我正在使用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[]"/>
答案 0 :(得分:7)
我找到了解决方案。答案是将HttpPostedFileBase更改为IEnumerable(如果要上载多个文件)。
我遇到了和你一样的问题。这解决了我的问题。这也是一个很好的链接:Phil Haacks's post
答案 1 :(得分:3)
问题是您正在尝试访问包含相同索引的数组,因为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];
答案 2 :(得分: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;"/>
答案 3 :(得分:2)
在HTML5中,您可以使用单个文件上传字段上传多个文件:
<input type="file" id="files" name="files" multiple />
在这种情况下,您的操作方法可能类似于:
public ActionResult Index(List<HttpPostedFileBase> files) {
foreach (var file in files) {
...etc.
答案 4 :(得分:1)
我认为问题是生成的HTML中的名称文件[]。很明显,这个插件不能很好地工作。
有时逆转正确的行为是有效的。尝试从名称中删除“[]”并查看。
实际上,因为您没有按名称使用输入字段。您可以将名称取消设置,类似于插件的主页示例。
试一试。
答案 5 :(得分:1)
我找到了。应该定义'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>
尽管如此,谢谢你的帮助。
答案 6 :(得分:1)
你可以look here来自Phil Haack的解决方案。
在视图
上<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");
}
答案 7 :(得分:1)
使用jquery ajax和.net MVC发布许多文件:
在视图中:
<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");
}
答案 8 :(得分:0)
视图
<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);
}
}
}