HttpPostedfileBase es null usando jQuery Ajax

María, parte de este gran equipo, nos ha hecho el favor de escribir este post ya que conoce perfectamente dicho tema.

Solución:

Primero, es posible cargar con Ajax, lo importante es que debe configurar

en su formulario para decirle que su formulario tiene una entrada de carga de archivos. Entonces tienes que aceptar HttpPostedFileBase como un parámetro de entrada en la acción de su controlador.

Prueba esto. Ejemplo de código de carga jquery. (Tomado principalmente de ¿Cómo puedo cargar archivos de forma asíncrona?)

function uploadFile(uploadId) 
    var formData = new FormData($('form')[0]);

    $.ajax(
        url: '<%= Url.Action("SaveOneDatabase")%>',
        type: 'Post',
        beforeSend: function(),
        success: function(result)

        ,
        xhr: function()   // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload)  // Check if upload property exists
                // Progress code if you want
            
            return myXhr;
        ,
        error: function(),
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    );

El formulario HTML necesita esto attribute. Vea esta publicación por qué la necesita -> ¿Qué significa enctype=’multipart/form-data’?

enctype="multipart/form-data"

C#

[HttpPost]
public ActionResult SaveOneDatabase(HttpPostedFileBase file)

He modificado la respuesta de @a moradi.

JS:

//FormData:
//Consider it a normal form but with "multipart/form-data" encoding type.
//Inside it works same as XMLHttpRequest.send() method.    
var model = new FormData();
model.append("File", $('#file')[0].files[0]);
model.append("Name", "Name");
$.ajax( 
        url: someUrl,
        type: "POST",
        data: model,
        //contentType: 
        //Sets the ContentType in header.
        //The default contentType is "application/x-www-form-urlencoded; charset=UTF-8". But this will prevent us sending AntiForgeryToken to service/controller.
        //To prevent this contentType is set to false.
        contentType: false,
        //processData:
        //To prevent data getting converted to string format, 'processData' option is set to false.
        processData: false,
        success = function (m) ...
        error = function (m) ...
    );

Ver modelo:

public class PhotoAlbumViewModel 
    public  string Name  get; set; 
    public HttpPostedFileBase File  get; set; 

Controlador:

public JsonResult AddPhoto(PhotoAlbumViewModel model) 
    ...

Referencia:

Consulte los siguientes enlaces para obtener más detalles: FormData, JQuery, ContentType

Vista:

Ver modelo:

public class PhotoAlbumViewModel 
    public  string Name  get; set; 
    public HttpPostedFileBase File  get; set; 

Controlador:

public JsonResult AddPhoto(PhotoAlbumViewModel model) 
    // var result =...
    // and set your result; 
    return Json(result, JsonRequestBehavior.AllowGet);

Reseñas y calificaciones

Nos puedes añadir valor a nuestro contenido tributando tu experiencia en las acotaciones.

---

---

Utiliza Nuestro Buscador