type - upload file ajax post

carga de archivo mvc3 utilizando formulario ajax-Request.Files empty

Question

Estoy usando mvc3, y estoy tratando de crear una serie de formularios ajax que cada uno carga un archivo, dentro de una sola página. Aquí está la vista de la página:

@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>

    @Html.Partial("_UploadItem")
    @Html.Partial("_UploadItem")
    @Html.Partial("_UploadItem")

<script type="text/javascript">
    function Go() {
        // loop through form tags
        for (var n = 0; n < document.forms.length; n++) {
            var f = document.forms[n];
            // if a dress is chosen, a caption is chosen
            // and a file is chosen, then submit the ajax form
            if (f.dressid.value != '''' &&
               f.dresscaption.value != '''' &&
               f.fileitem.value != '''')
                f.submit();
        }
    }
</script>
<input type="button" onclick="Go();"/>

Luego la función Go () recorre los formularios ajax, verificando si las 3 piezas (dressid, dresscaption y fileitem) en cada formulario no están vacías, y las llamadas envían los formularios que sí lo hacen, iniciando una carga asíncrona.

Aquí está la vista parcial:

@using SoRefeising.Models
@using (Ajax.BeginForm("UploadFile", new { }, new AjaxOptions { HttpMethod = "POST" }, new { enctype="multipart/form-data"}))
{
    List<SelectListItem> items = (List<SelectListItem>)ViewBag.Dresses;

    <span>Dress</span>
    @Html.DropDownList("dressid", items, "Choose Dress");
    <span>Caption</span>
    @Html.TextBox("dresscaption")
    <input type="file" id="fileitem" />    
}

He marcado cada formulario con el atributo multiparte. Cuando se genera la página, obtengo lo siguiente:

<form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form0" method="post">    <span>Dress</span>
<select id="dressid" name="dressid"><option value="">Choose Dress</option>
<option value="1">Simpson01</option>
<option value="2">Simpson02</option>
</select>    <span>Caption</span>
<input id="dresscaption" name="dresscaption" type="text" value="" />    <input type="file" id="fileitem" />    
</form>

    <form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form1" method="post">    <span>Dress</span>
<select id="dressid" name="dressid"><option value="">Choose Dress</option>
<option value="1">Simpson01</option>
<option value="2">Simpson02</option>
</select>    <span>Caption</span>
<input id="dresscaption" name="dresscaption" type="text" value="" />    <input type="file" id="fileitem" />    
</form>

    <form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form2" method="post">    <span>Dress</span>
<select id="dressid" name="dressid"><option value="">Choose Dress</option>
<option value="1">Simpson01</option>
<option value="2">Simpson02</option>
</select>    <span>Caption</span>
<input id="dresscaption" name="dresscaption" type="text" value="" />    <input type="file" id="fileitem" />    
</form>

Todo se ve bien ...

Aquí está la acción del controlador que se llama

[HttpPost]
        public ActionResult UploadFile(string dressid, string dresscaption)
        {
                HttpPostedFileBase hpf = Request.Files[0] as HttpPostedFileBase;
...

Cuando se invoca la acción, la colección Request.Files tiene 0 elementos, en lugar del archivo seleccionado. He habilitado javascript discreto, el archivo no intrusivo se carga en la página maestra y funciona en otras páginas.

He visto algunos mensajes en el foro acerca de tener cuidado con el tamaño de los archivos. El archivo con el que estoy probando es <2k

¿Alguna idea de por qué no hay elementos en Request.Files?

Gracias

Answer 1

Antes que nada, no estoy seguro de por qué tienes esto tres veces.

@Html.Partial("_UploadItem")
@Html.Partial("_UploadItem")
@Html.Partial("_UploadItem")

¿Estás intentando subir varios archivos? Hay bastantes guiones que le permiten hacer esto de manera bastante eficiente. También está generando formularios múltiples con campos que contienen la misma identificación. Esto no afectará el proceso de carga, pero es una mala práctica. Creo que necesitas refactorizar lo anterior. De todos modos, cambie el campo en su vista parcial a

<input type="file" name="file" />

Creo que el problema puede ser con su acción real y cómo está tratando de recuperar el archivo. Prueba esto

HttpPostedFileBase postedFile = Request.Files["file"];

Avísame si eso funciona.

Answer 2

No puedes subir archivos usando AJAX. Reemplace el Ajax.BeginForm con un Html.BeginForm normal. También puede consultar la siguiente publicación en el blog .

Si desea utilizar cargas asíncronas, puede probar algunos de los componentes de carga disponibles, como Ajax Upload y Uploadify .