我找到了解释如何使用新的HTML5 FormData API通过AJAX/Jquery上传文件的following great thread。
以下是使用较新JQuery 1.8+语法的代码的略微更新版本
$(':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>
在服务器端,我们有类似这样的东西。
[HttpPost]
public string Upload(HttpPostedFileBase file)
{
// do something with file
return "you uploaded a file called " + file.FileName;
}
这很好用。直到您决定使用文件对话框上的“多个”属性,并发送多个文件。
<form enctype="multipart/form-data">
<input name="file" type="file" multiple="multiple" />
<input type="button" value="Upload" />
</form>
<progress></progress>
您将在网上找到建议以下解决方案的各种页面
public string Upload(IEnumerable<HttpPostedFileBase> files)
{
foreach(var file in files)
...
}
糟了。不起作用
public string Upload(List<HttpPostedFileBase> files)
{
foreach(var file in files)
...
}
不是的。不起作用。
public string Upload(IEnumerable files)
{
foreach(var file in files)
...
}
甚至不编译
public string Upload(HttpPostedFileBase[] files)
{
foreach(HttpPostedFileBase file in files)
...
}
你猜怎么着?不起作用。让我们转而尝试处理Request.Files。好的老的可靠的Request.Files。永远不会失败。
public string Upload()
{
foreach (HttpPostedFileBase uf in Request.Files)
...
}
剧透警告:它不工作。
啊哈。明白了!我将在Request.Files中迭代这些键。
public string Upload()
{
foreach(var key in Request.Files.AllKeys)
{
var file = Request.Files[key];
}
}
再说一次,它不起作用。
发布于 2017-05-15 22:36:49
在我的例子中,对我起作用的是将我所有的文件绑定到一个ViewModel字段。ViewModel将是我在前端使用的模型。
@using School.ViewModels
@model UserProfileViewModel
<form enctype="multipart/form-data">
<input id="username"name="username" type="text" />
<input name="Myfiles" type="file" multiple="multiple" />
<input type="button" value="Upload" />
</form>
UserProfileViewModel.cs
namespace School.ViewModels
{
public class UserProfileViewModel
{
public long Username { get; set; }
public List<HttpPostedFileBase> Myfiles { get; set; }
}
}
UserProfilePicturesController.cs
public ActionResult Create([Bind(Include="Username,Myfilese")] UserprofileViewModel userprofileViewModel)
{
var files = userprofileViewModel.Myfiles;
foreach(HttpPostedFileBase file in files)
{
//do something here
}
}
https://stackoverflow.com/questions/21784647
复制相似问题