Enviar archivos por Ajax en ASP .NET MVC

En esta entrada mostraremos una forma fácil de enviar archivos a través de ajax en un proyecto ASP .NET MVC con jquery. Ya que en programación es bastante común encontrarse con el escenario de enviar archivos a través de un formulario web.

Primero debemos crear en un controlador el metodo que recibirá el archivo por ejemplo:

[HttpPost]
public ActionResult CargarArchivo(HttpPostedFileBase archivo)
{
  if (archivo != null && archivo.ContentLength > 0)
  {
    //logica con archivo
  }
  return view();
}

Luego en la vista creamos un input de tipo file, por ejemplo:

<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label class="col-md-3">Archivo Excel</label>
      <div class="col-md-9">
        <input class="form-control  file-input" id="archivo" name="archivo" type="file" value="" style="display: block;" accept=".xls,.xlsx " />
       </div>
    </div>
  </div>
</div>

Luego en la sección de scripts js hacemos el envío a través de ajax con jquery de la siguiente forma

$(".btnCargarArchivo").on("click", function () {
  var urlSubirArchivo = '@Url.Action("CargarArchivo", "Carga")';
  var fileUpload = $("#archivo").get(0);
  var files = fileUpload.files;
  var formData = new FormData();
  // iteramos todos los archivos y los agregamos a formData
  for (var i = 0; i < files.length; i++) {
    console.log('(files[i].name:' + files[i].name);
    formData.append('archivo', files[i]);
  }
  $.ajax({
    type: 'POST',
    url: urlSubirArchivo,
    data: formData,
    processData: false,
    contentType: false,
    success: function (data) {
      //logica para procesar datos devueltos
    }
  });
});
Entradas creadas 12

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicaciones relacionadas

Comienza escribiendo tu búsqueda y pulsa enter para buscar. Presiona ESC para cancelar.

Volver arriba