Ajax FileUpload y JQuery formData en ASP.NET MVC

Tengo un problema al publicar formData </​​code> en el método de acción del lado del servidor. Debido llamada AJAX no envía archivos al servidor, tengo que añadir los datos cargador de archivos a FormData </​​code> manualmente la siguiente manera:

var formData = new FormData();
formData.append("imageFile", $("#imageFile").file);
formData.append("coverFile", $("#coverFile").file);

Escribí la función jQuery que necesita publicar datos de formulario en el servidor mediante una llamada ajax. Es trabajos pero publicado formData </​​code> en el lado del servidor siempre es nulo!

este es mi guion:

    <script>
        function SubmitButtonOnclick()
        {    
            var formData = new FormData();
            formData.append("imageFile", $("#imageFile").file);
            formData.append("coverFile", $("#coverFile").file);

            $.ajax({
                type: "POST",
                url: '@Url.Action("EditProfile", "Profile")',
                data: formData,
                dataType: 'json',
                contentType: "multipart/form-data",
                processData: false,
                success: function (response) {
                    $('#GeneralSection').html(response.responseText);
                },
                error: function (error) {
                    $('#GeneralSection').html(error.responseText);
                }
            });
        }
    </script>

Edit 1: This is the action method in controller:

        public ActionResult EditProfile(ProfileGeneralDescription editedModel,
                                HttpPostedFileBase imageFile,
                                HttpPostedFileBase coverFile,
                                string postOwnerUser)
        {
            try
            {
                if (postOwnerUser == User.Identity.Name)
                {
               //edit codes...    
                    var result = GetProfileGeneralDescription(postOwnerUser);
                    return PartialView("_GeneralProfile", result);
                }
                else
                {
                    var error = new HandleErrorInfo(
                    new Exception("Access Denied!"),
                    "Profile",
                    EditProfile
                    return PartialView("~/Views/Shared/Error.cshtml", error);
                }
            }
            catch (Exception ex)
            {
                var error = new HandleErrorInfo(ex, "Profile", EditProfile
                return PartialView("~/Views/Shared/Error.cshtml", error);
            }
        }

Edit 2: Cshtml view file content:

@model Website.Models.ViewModel.Profile

    @using (Ajax.BeginForm("EditProfile", "Profile", new { postOwnerUser = User.Identity.Name }, new AjaxOptions()
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "GeneralSection"
    }, new { enctype = "multipart/form-data" }))
    {

        <div>
             <button id="btnSubmit" type="button" onclick="SubmitButtonOnclick()">Submit</button>
        </div>

        <input type="hidden" name="username" id="username" value="@Model.Username"/>

        
Edit Photos <div> Select profile picture: <input id="imageFile" type="file" name="imageFile" accept="image/png, image/jpeg" /> @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)Remove profile photo </div> <div> Select cover picture: <input id="coverFile" type="file" name="coverFile" accept="image/png, image/jpeg" /> @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)RemoveCover </div>
 
    }

Any tips, link or code example would be useful.
Thank you in advance!

0
Sí, pero Steel envió null al servidor.
agregado el autor Mojtaba, fuente
¿Has intentado configurar contentType a false ?
agregado el autor Knelis, fuente

3 Respuestas

En lugar de jQuery Ajax podrías usar

 <script>
            function SubmitButtonOnclick()
            { 
                var formData= new FormData();
                var imagefile=document.getElementById("imageFile").files[0];
                var coverfile=document.getElementById("coverFile").files[0];
                formData.append("imageFile",imageFile);
                formData.append("coverFile",coverFile);
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/Profile/EditProfile", true);
                xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
                xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
                xhr.send(formData);

            }

      function UploadComplete(evt) {
        if (evt.target.status == 200) 
                alert("Logo uploaded successfully.");

        else 
                 alert("Error Uploading File");
        }

    function UploadFailed(evt) {
        alert("There was an error attempting to upload the file.");

    }
 </script>

Esto funciona para mi !!

Tu script con cambios

 function SubmitButtonOnclick() {
        var formData = new FormData();
        var file = document.getElementById("imageFile").files[0];
        var file1 = document.getElementById("coverFile").files[0];
        formData.append("imageFile", file);
        formData.append("coverfile", file1);
        $.ajax({
            type: "POST",
            url: '@Url.Action("EditProfile","Default1")',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
                $('#GeneralSection').html(response.responseText);
            },
            error: function (error) {
                $('#GeneralSection').html(error.responseText);
            }
        });
    }
0
agregado
Tus consejos fueron muy útiles @Nilesh. Gracias :-) Finalmente funciona sin publicar otra información. Solo esta línea: formData.append ("imageFile", $ ("# imageFile"). File); no funciona y debe ser reemplazado por formData.append ("imageFile", archivo); Gracias. :)
agregado el autor Mojtaba, fuente
Copio/pego su código en la sección de mi script pero es acero enviado datos nulos a la función del lado del servidor. (alerta de éxito se mostró en el lado del cliente)
agregado el autor Mojtaba, fuente
Por favor, mira mi edición 1 en cuestión.
agregado el autor Mojtaba, fuente
Eres un buen maestro :-)
agregado el autor Mojtaba, fuente
Eso es problema otra vez Todos los datos y archivos de imágenes son nulos. :-(
agregado el autor Mojtaba, fuente
Muy, muchas gracias Nilesh :-) También agregué este código para agregar otros campos de datos: var username = document.getElementById ("username"). Value; y agregué este campo a formData como este: < code> formData.append ("nombre de usuario", nombre de usuario);
agregado el autor Mojtaba, fuente
Consulte la edición 2 para ver el contenido del archivo cshtml.
agregado el autor Mojtaba, fuente
Estoy muy confuso :-) No funciona para mí, incluso sin otros campos de datos.
agregado el autor Mojtaba, fuente
Gracias por tu respuesta. Mi último código fue como el tuyo. Pero necesito publicar todos los datos juntos y reemplazar el texto de respuesta con contenido actual que XHR no haga esto exactamente para mí. ¿Cómo puedo agregar la página de éxito o error a la solicitud de XHR?
agregado el autor Mojtaba, fuente
si publico datos usando otras formas, ¿por qué formData en este script no contiene archivos de imagen para mí?
agregado el autor Mojtaba, fuente
Gracias de nuevo :-) @Nilesh ¿sabes por qué la función de éxito en el script no se activa? (Necesito reemplazar el contenido de algunas etiquetas con responseText )
agregado el autor Mojtaba, fuente
Gracias por tu ayuda @Nilesh. ¿Probas esta operación con tu script o con el mío?
agregado el autor Mojtaba, fuente
Puesto que está publicando jsondata. Haga que su controlador regrese tipo a JsonResult es decir, público JsonResult EditProfile (...) y si es exitoso devuelve Json (true, JsonRequestBehavior.AllowGet ); else return return Json (false, JsonRequestBehavior.AllowGet);
agregado el autor Nilesh, fuente
finalmente funciona ... ¡Saludos! :)
agregado el autor Nilesh, fuente
Voy a verificar y dejarte saber
agregado el autor Nilesh, fuente
Con tu script
agregado el autor Nilesh, fuente
Muchas gracias.... :-)
agregado el autor Nilesh, fuente
@RachitGupta puedes compartir tu código
agregado el autor Nilesh, fuente
He actualizado la respuesta ... no use jQuery para adjuntar archivo
agregado el autor Nilesh, fuente
En su método ajax, he cambiado ContentType: false y la imagen viene en controlador
agregado el autor Nilesh, fuente
He intentado solo con imágenes que están funcionando en su ajax.beginform pero no estoy seguro de cómo está publicando datos en el controlador
agregado el autor Nilesh, fuente
Lo he intentado ... está trabajando aquí ... ¿puedes publicar tu último código si es posible?
agregado el autor Nilesh, fuente
compruebe la respuesta actualizada ... no sé por qué jQuery no está tomando el archivo, así que he usado Javascript
agregado el autor Nilesh, fuente
puedes mostrarme tu código de controlador
agregado el autor Nilesh, fuente
Si tiene éxito, se llama a la función UploadComplete . Puedes escribir tu código en ese método. si la carga falla, se llama a la función UploadFailed
agregado el autor Nilesh, fuente
Nilesh, lo he intentado exactamente de la misma manera, pero obtengo un error. Incluso error.responseText no imprime nada
agregado el autor It's a trap, fuente
Muchas gracias, me ayuda a enviar datos en bruto demasiado grandes, muchas gracias ...
agregado el autor Jay Magwadiya, fuente
   <input type="file" id="picfile" name="picf" />
       <input type="text" id="txtName" style="width: 144px;" />
 $("#btncatsave").click(function() {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;

                    var file = document.getElementById("picfile").files[0];
                    formData.append("FileUpload", file);
                    formData.append("Name", Name);

$.ajax({
                    type: "POST",
                    url: '/Category_Subcategory/Save_Category',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (msg) {

                                 alert(msg);

                    },
                    error: function (error) {
                        alert("errror");
                    }
                });

});

 [HttpPost]
    public ActionResult Save_Category()
    {
      string Name=Request.Form[1]; 
      if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];
         }


    }
0
agregado

Pude subir el archivo a través de jQuery utilizando el iframe, expliqué lo mismo en mi publicación del blog, por favor, siga el enlace para obtener la respuesta.

http://kaushikghosh12.blogspot.com/2014/02 /ajax-fileupload-on-all-browsers.html

0
agregado
JavaScript - Comunidad española
JavaScript - Comunidad española
4 de los participantes

En este grupo hablamos de JavaScript. Partner: es.switch-case.com