使用 ASP.NET MVC 3 的 Blueimp 多文件上传器
我正在尝试将 blueimp File Upload 添加到 MVC 应用程序,但遇到问题在后期操作中接收文件(我正在使用多文件上传功能)。有人可以帮我解决这个问题吗?
在我看来,我有以下代码:
<form id="file_upload" enctype="multipart/form-data" action="Home/SaveFile" method="post">
<input type="file" name="file" multiple="true"/>
<button>Upload</button>
<div>Upload files</div>
</form>
<br />
###############################
<table id="files">
</table>
<button id="start_uploads">Start uploads</button>
<button id="cancel_uploads">Cancel uploads</button>
blueimp 文件上传的 JQuery 代码如下:
$(document).ready(function () {
$('#file_upload').fileUploadUI({
uploadTable: $('#files'),
downloadTable: $('#files'),
buildUploadRow: function (files, index) {
return $('<tr><td class="file_upload_preview"><\/td>' +
'<td>' + files[index].name + '<\/td>' +
'<td class="file_upload_progress"><div><\/div><\/td>' +
'<td class="file_upload_start">' +
'<button class="ui-state-default ui-corner-all" title="Start Upload">' +
'<span class="ui-icon ui-icon-circle-arrow-e">Start Upload<\/span>' +
'<\/button><\/td>' +
'<td class="file_upload_cancel">' +
'<button class="ui-state-default ui-corner-all" title="Cancel">' +
'<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
'<\/button><\/td><\/tr>');
},
buildDownloadRow: function (file) {
return $('<tr><td>' + file.name + '<\/td><\/tr>');
},
beforeSend: function (event, files, index, xhr, handler, callBack) {
handler.uploadRow.find('.file_upload_start button').click(callBack);
}
});
$('#start_uploads').click(function () {
$('.file_upload_start button').click();
});
$('#cancel_uploads').click(function () {
$('.file_upload_cancel button').click();
});
});
在控制器内部有以下操作方法:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SaveFile(IEnumerable<HttpPostedFileBase> files)
{
foreach (HttpPostedFileBase file in files)
{
//some file upload magic
}
return View("MyView");
}
我正在使用 MVC 3。
在操作方法中,如果参数的类型为 IEnumerable,则它接收 null如果参数是 HttpPostedFileBase 类型,它会以一种奇怪的方式接收文件,并且操作方法不会按预期工作。
非常感谢任何形式的帮助,谢谢。
干杯!
I am trying to add blueimp File Upload to a MVC application and I'm having problems with receiving the files in the post action(im going for the multi file upload functionality).Can someone please help me figure this out?
In my view i have the following code:
<form id="file_upload" enctype="multipart/form-data" action="Home/SaveFile" method="post">
<input type="file" name="file" multiple="true"/>
<button>Upload</button>
<div>Upload files</div>
</form>
<br />
###############################
<table id="files">
</table>
<button id="start_uploads">Start uploads</button>
<button id="cancel_uploads">Cancel uploads</button>
The JQuery code for blueimp File Upload is the following:
$(document).ready(function () {
$('#file_upload').fileUploadUI({
uploadTable: $('#files'),
downloadTable: $('#files'),
buildUploadRow: function (files, index) {
return $('<tr><td class="file_upload_preview"><\/td>' +
'<td>' + files[index].name + '<\/td>' +
'<td class="file_upload_progress"><div><\/div><\/td>' +
'<td class="file_upload_start">' +
'<button class="ui-state-default ui-corner-all" title="Start Upload">' +
'<span class="ui-icon ui-icon-circle-arrow-e">Start Upload<\/span>' +
'<\/button><\/td>' +
'<td class="file_upload_cancel">' +
'<button class="ui-state-default ui-corner-all" title="Cancel">' +
'<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
'<\/button><\/td><\/tr>');
},
buildDownloadRow: function (file) {
return $('<tr><td>' + file.name + '<\/td><\/tr>');
},
beforeSend: function (event, files, index, xhr, handler, callBack) {
handler.uploadRow.find('.file_upload_start button').click(callBack);
}
});
$('#start_uploads').click(function () {
$('.file_upload_start button').click();
});
$('#cancel_uploads').click(function () {
$('.file_upload_cancel button').click();
});
});
And inside the controller the following action method:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SaveFile(IEnumerable<HttpPostedFileBase> files)
{
foreach (HttpPostedFileBase file in files)
{
//some file upload magic
}
return View("MyView");
}
I am using MVC 3.
In the action method, if the argument is of type IEnumerable it receives null and if the argument is of type HttpPostedFileBase it receives the files in a strange way and the action method doesn't work how it's suppose to.
Any kind of help is much appreciated, thanks.
Cheers!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
将为每个文件调用
SaveFile
控制器操作。所以它应该是这样的:如果你想在同一个请求中处理多个上传文件,你可以看看 文档的相应部分。
The
SaveFile
controller action will be called for each file. So it should look like this:And if you want to handle multiple upload files in the same request you may take a look at the respective section of the documentation.
要获取您可以使用的文件,
To get the files you could use,
我知道这是一个老问题,但只是在这里指出。除了 Darin Dimitrov 后 - 返回的 json 格式应与 jQuery 文件上传 兼容 - 即使传输一个文件,它也需要数组。例如:
I know that this is an old issue, but just to point in here. In addition to Darin Dimitrov post - returned json should be in format compatible with jQuery File Upload - which expects array even if one file is transmitted. For example: