如何处理在ASP.NET MVC HTML5多文件上传? [英] How do I handle HTML5 Multiple File uploads in ASP.NET MVC?
问题描述
我找到了<一href="http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery/8758614#8758614">following大螺纹与如何使用新的HTML5 API FORMDATA通过AJAX / jQuery的做文件上传的解释
I found the following great thread with an explanation of how to do file uploads through AJAX/Jquery using the new HTML5 FormData API
下面是一个code稍微更新的版本,与新的JQuery 1.8+语法
Here's a slightly updated version of that code, with the newer JQuery 1.8+ syntax
$(':button').click(function(){
var formData = new FormData($('form')[0]);
$.ajax({
url: '/Upload', //my ASP.NET MVC method
type: 'POST',
// handle the progress report
xhr: function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // Check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
}
return myXhr;
},
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
})
.done(function(){
alert("success");
})
.fail(function(){
alert("error");
});
});
function progressHandlingFunction(e){
if(e.lengthComputable){
$('progress').attr({value:e.loaded,max:e.total});
}
}
和这里的形式
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
在服务器端,我们有这样的事情。
On the server side, we have something like this.
[HttpPost]
public string Upload(HttpPostedFileBase file)
{
// do something with file
return "you uploaded a file called " + file.FileName;
}
这伟大工程。除非你决定使用该文件对话框上的多属性,并发送多个文件。
This works great. UNTIL you decide to use the "multiple" attribute on the file dialog, and send multiple files.
<form enctype="multipart/form-data">
<input name="file" type="file" multiple="multiple" />
<input type="button" value="Upload" />
</form>
<progress></progress>
您会发现不同的网页在线提示如下解决方案
You'll find various pages online suggesting the following solutions
public string Upload(IEnumerable<HttpPostedFileBase> files)
{
foreach(var file in files)
...
}
抱歉。不工作
Oops. Doesn't work
public string Upload(List<HttpPostedFileBase> files)
{
foreach(var file in files)
...
}
都能跟得上。不工作。
Nope. Doesn't work.
public string Upload(IEnumerable files)
{
foreach(var file in files)
...
}
甚至没有的编译的
public string Upload(HttpPostedFileBase[] files)
{
foreach(HttpPostedFileBase file in files)
...
}
你猜怎么着?不工作。让我们试着用Request.Files处理代替。好老可靠Request.Files。永远不会失败。
Guess what? Doesn't work. Lets try dealing with Request.Files instead. Good old reliable Request.Files. Never fails.
public string Upload()
{
foreach (HttpPostedFileBase uf in Request.Files)
...
}
剧透:这是行不通的。
Spoiler alert: It Doesn't work.
啊哈。得到它了!我会遍历在Request.Files代替钥匙。
Aha. Got it! I'll iterate over the keys in Request.Files instead.
public string Upload()
{
foreach(var key in Request.Files.AllKeys)
{
var file = Request.Files[key];
}
}
再次,这是行不通的。
Yet again, it doesn't work.
推荐答案
什么的确实的工作,是下面的,<一个href="http://weblog.west-wind.com/posts/2012/Mar/06/Using-the-HTML5-input-typefile-multiplemultiple-Tag-in-ASPNET">from总是可靠,动态的头发里克施特拉尔的博客
What does work, is the following, from the blog of the always dependable and dynamically haired Rick Strahl
public string Upload()
{
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
}
}
这背后的原因是,传递给 Request.Files
文件的集合所有具有相同名称,因为他们来自一个单一的文件上传对话框。
The reason behind this is that the collection of files passed to Request.Files
all have the same name, because they come from a singular file upload dialog.
服务器端方法传递一个的单的包含文件的对象,出于某种原因,Request.Files是得到它的唯一途径。
the server side method is passed a single object containing the files, and for some reason Request.Files is the only way to get at it.
希望我在加入这个救别人有点头疼。
Hopefully I've saved someone a bit of headache by adding this in.
这篇关于如何处理在ASP.NET MVC HTML5多文件上传?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!