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"
                                    }
                              }
            }
        );