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
    Commented 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
    Commented el 29 mar. 2019 a las 21:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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