c# - multiple - Cargador de archivos múltiples Blueimp con ASP.NET MVC 3

mvc submit button action

Question

Estoy tratando de agregar Blueimp File Upload a una aplicación MVC y tengo problemas para recibir los archivos en la acción posterior (estoy buscando la funcionalidad de carga de varios archivos). ¿Puede alguien ayudarme a resolver esto?

En mi opinión, tengo el siguiente código:

<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>

El código JQuery para la carga de archivos blueimp es el siguiente:

$(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();
});
});

Y dentro del controlador, el siguiente método de acción:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SaveFile(IEnumerable<HttpPostedFileBase> files)
{
foreach (HttpPostedFileBase file in files)
{
//some file upload magic
}
return View("MyView");
}

Estoy usando MVC 3.

En el método de acción, si el argumento es de tipo IEnumerable, recibe nulo y si el argumento es de tipo HttpPostedFileBase recibe los archivos de una manera extraña y el método de acción no funciona como se supone.

Cualquier tipo de ayuda es muy apreciada, gracias.

¡Aclamaciones!

Answer 1

Se SaveFile acción del controlador SaveFile para cada archivo. Por lo tanto, debería verse así:

[HttpPost]
public ActionResult SaveFile(HttpPostedFileBase file)
{
//some file upload magic
// return JSON
return Json(new
{
name = "picture.jpg",
type = "image/jpeg",
size = 123456789
});
}

Y si desea manejar múltiples archivos de carga en la misma solicitud, puede echar un vistazo a la sección respectiva de la documentación .

Answer 2

Para obtener los archivos que podrías usar,

foreach (string inputTagName in Request.Files)
{
HttpPostedFileBase file = Request.Files[inputTagName];
}

Answer 3

Sé que este es un problema antiguo, pero solo para señalar aquí. Además de Darin Dimitrov , el jSON post-retorno debe estar en formato compatible con jQuery File Upload , que espera el arreglo incluso si se transmite un archivo. Por ejemplo:

 return Json(
new
{
files = new[]{
new {
name = "www.png",
size = "1234567"
}
}
}
);