0

este es mi formulario e intentado hacerlo de varias formas pero no me esta funcionando por ejemplo si tengo mil registros se tardara y miestras esta insertando los datos quisiera mostrar un gif de cargando gracias de antemano

<div class="row">
            <div class="col-md-11 col-md-offset-0">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h1>Seleccione<span class="badge badge-secondary">Archivo</span></h1>
                    </div>



                    {{Form::open(array( 'url'=>'#','name'=>'f_cargar_datos_usuarios','id'=>'f_cargar_datos_usuarios','method'=>'post','action'=>'cargar_datos_usuarios','class'=>'formarchivo','files'=>'true','enctype'=>'multipart/form-data'))}}

                    <br>
                    <br>
                    <div class="form-group col-xs-12">
                        {!! Form::label('datos', 'Datos Usuarios:', ['class' => 'col-lg-2 control-label']) !!}
                        <div class="col-lg-10">
                            {!! Form::file('archivo',['class' => 'form-control','id'=>'archivo']) !!}
                        </div>

                    </div>

                    <br>
                    <br>

                    <br>
                    <br>
                    <br>
                    <div class="modal-footer d-flex justify-content-center">
                        <button  type="submit" class="btn btn-primary"   id="enviar">CARGAR DATOS</button>
                    </div>
                </div>

                {{Form::close()}}


                    </div>



                </div>
            </div>
        </div>

este es mi js

$(document).on("submit",".formarchivo",function(e){
    e.preventDefault();

    var nombreform=$(this).attr("id");


        // var miurl="cargar_datos_usuarios";
        // var divresul="notificacion_resul_fcdu"


    var formData = new FormData($("#"+nombreform+"")[0]);




    $.ajax({
            url: 'cargar_datos_usuarios',
            type: 'POST',
            data: formData,

            cache: false,
            contentType: false,
            processData: false,

            beforeSend: function () {
                $("#"+divresul+"").html($("#cargador_empresa").html());
            },


            success: function (data) {
                alert("Se cargo con exito");
            },

            error: function (data) {
                alert("ha  ocurrido un error");
            }
        });



});

y este es mi controlador

public function cargar_datos_usuarios(Request $request)
    {

        \DB::beginTransaction();
        $archivo=$request->file('archivo');
        $nombre_original=$archivo->getClientOriginalExtension();
//     $extension=$archivo->getClientOriginalExtension();
        $rl=Storage::disk('archivos')->put($nombre_original,\File::get($archivo));
        $ruta=storage_path('archivos')."/".$nombre_original;

        if ($rl){
            Excel::selectSheetsByIndex(0)->load($ruta,function ($hoja){
                $hoja->each(function ($fila){
//                    $usersemails=User::where("identidad","=",$fila->identidad)->firs();
//                    if (count($usersemails)==0){
                        $empleados=new empleado();
                        $empleados->nombre=$fila->nombre;
                        $empleados->identidad=$fila->identidad;
                        $empleados->num_empleado=$fila->num_empleado;
                        $empleados->fecha_nacimiento=$fila->fecha_nacimiento;
                        $empleados->direccion=$fila->direccion;
                        $empleados->telefono=$fila->telefono;
                        $empleados->celular=$fila->celular;
                        $empleados->nacionalidad=$fila->nacionalidad;
                        $empleados->correo=$fila->correo;
                        $empleados->nivel_academico=$fila->nivel_academico;
                        $empleados->titulo_obtenido=$fila->titulo_obtenido;
                        $empleados->rtn=$fila->rtn;
                        $empleados->ihss=$fila->ihss;
                        $empleados->certificado_seguro=$fila->certificado_seguro;
                        $empleados->genero=$fila->genero;
                        $empleados->estado_civil=$fila->estado_civil;
                        $empleados->departamento=$fila->departamento;
                        $empleados->municipio=$fila->municipio;
                        $empleados->tipo_contratacion=$fila->tipo_contratacion;
                        $empleados->ano_contratacion=$fila->ano_contratacion;
                        $empleados->gerencia=$fila->gerencia;
                        $empleados->unidad_ejecutora=$fila->unidad_ejecutora;
                        $empleados->actividad_obra=$fila->actividad_obra;
                        $empleados->puesto=$fila->puesto;
                        $empleados->dept_icf=$fila->dept_icf;
                        $empleados->banco=$fila->banco;
                        $empleados->no_cuenta=$fila->no_cuenta;
                        $empleados->pin=$fila->pin;
                        $empleados->vigencia=$fila->vigencia;
                        $empleados->no_contrato=$fila->no_contrato;
                        $empleados->sueldo=$fila->sueldo;
                        $empleados->sindicato=$fila->sindicato;
                        $empleados->lugar_nacimiento=$fila->lugar_nacimiento;
                        $empleados->descripcion_funciones=$fila->descripcion_funciones;
                        $empleados->forma_pago=$fila->forma_pago;
                        $empleados->lugar_recibe_pago=$fila->lugar_recibe_pago;
                        $empleados->estado_empleado=$fila->estado_empleado;
                        $empleados->save();
                        \DB::commit();
//                    }
                });
            });
            return view("mensajes.msj_correcto")->with("msj","Usuarios cargados con exito");
        }
        else
        {
            return view("mensajes.msj_rechazado")->with("msj","Error al subir archivo");
        }


    }

2 respuestas 2

1

Espero ser de tú ayuda, te dejo el código, pero esto no es un gif, esto es con JQuery, CSS y HTML.

    <script>
            $(window).on('load', function () {
              setTimeout(function () {
                $(".loader-page").css({ visibility: "hidden", opacity: "0" })
              }, 2000);
            });
          </script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// INICIO ESTILOS CARGANDO
    .loader-page {
        position: fixed;
        z-index: 25000;
        background: rgb(255, 255, 255);
        left: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:all .3s ease;
      }
      .loader-page::before {
        content: "";
        position: absolute;
        border: 2px solid rgb(50, 150, 176);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        box-sizing: border-box;
        border-left: 2px solid rgba(50, 150, 176,0);
        border-top: 2px solid rgba(50, 150, 176,0);
        animation: rotarload 1s linear infinite;
        transform: rotate(0deg);
      }
      @keyframes rotarload {
          0%   {transform: rotate(0deg)}
          100% {transform: rotate(360deg)}
      }
      .loader-page::after {
        content: "";
        position: absolute;
        border: 2px solid rgba(50, 150, 176,.5);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        box-sizing: border-box;
        border-left: 2px solid rgba(50, 150, 176, 0);
        border-top: 2px solid rgba(50, 150, 176, 0);
        animation: rotarload 1s ease-out infinite;
        transform: rotate(0deg);
      }
    //   FIN ESTILOS CARGANDO
    <div class="loader-page"></div>       

1
  • lo hice de esta forma el problema que tengo es que solo me muestra cargando cuando recargo la pagina pero no cuando hago la petición
    – Crnajera
    el 29 mar. 2019 a las 20:18
-1

Ps algo sencillo con jquery y con algo de css por defecto deja oculto el contenedor del gif, y en el before send lo pone visible, y en success vuelve a ocultarlo.

Algo como este CodePen:

$('.load').click(function() {
  $(".loading").show();
  setTimeout(function() {
    $(".loading").hide();
  }, 3000);
})
div {
  background-position: center;
  height: 60px;
  display: none;
}


/* lightweight transparent background grey spinner */

.loading {
  min-width: 32px;
  min-height: 32px;
  background-repeat: no-repeat;
  background-image: url(https://www.ravpower.es/images/loading.gif);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="loading"></div>
<button class="load">
  Load it
</button>

1
  • lo intente hacer de esta forma pero no esta funcionando
    – Crnajera
    el 29 mar. 2019 a las 21:34

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.