This is my import_excel form which imports the data from an excel.csv file to my BD, what I need you to do is to show me through the Progress Bar the insertion progress of all my records in my BD but I do not know how to do it, I already try with several codes and with none I find it correct (I put an example of a code that I found).
I hope you can help me.
Greetings.
PHP DE INSERCIÓN
<?php
$title ="Importación Reloj | ";
include "head.php";
include "sidebar.php";
if (isset($_POST["enviar"]))
{//nos permite recepcionar una variable que si exista y que no sea null
require_once("conexion_excel.php");
require_once("functions.php");
$archivo = $_FILES["archivo"]["name"];
$archivo_copiado= $_FILES["archivo"]["tmp_name"];
$archivo_guardado = "copia_".$archivo;
//echo $archivo."esta en la ruta temporal: " .$archivo_copiado;
if (copy($archivo_copiado ,$archivo_guardado ))
{
//echo "se copeo correctamente el archivo temporal a nuestra carpeta de trabajo <br/>";
}
else
{
//echo "hubo un error <br/>";
}
if (file_exists($archivo_guardado))
{
$fp = fopen($archivo_guardado,"r");//abrir un archivo
$rows = 0;
while ($datos = fgetcsv($fp , 7000 , ";"))
{
set_time_limit(300);
$rows ++;
// echo $datos[0] ." ".$datos[1] ." ".$datos[2]." ".$datos[3] ."<br/>";
if ($rows > 0)
{
$resultado = insertar_datos($datos[0],$datos[1],$datos[2]);
if($resultado)
{
//echo "se inserto los datos correctamente<br/>";
}
else
{
//echo "no se inserto <br/>";
}
}
}
echo'<script type="text/javascript">
alert("Carga de archivo Exitosa");
window.location.href="importacion_excel.php";
</script>';
}
else
{
//echo "No existe el archivo copiado <br/>";
}
}
?>
<div class="right_col" role="main"> <!-- page content -->
<div class="col-md-2"> <!-- Tamaño Logo -->
<div class="image view view-first"> <!-- Movimiento de Imagen -->
<img class="thumb-image" style="width: 100%; display: block;" src="images/IMAGEN.png" alt="image" />
</div>
<div id="respuesta"></div>
</div>
<div class="">
<br>
<div class="row">
<div class="col-md-6 col-md-offset-1">
<br /><br />
<h1 style="text-align: center;">IMPORTACIÓN DEL ARCHIVO RELOJ</h1>
<br/>
<h3>INSTRUCCIONES</h3>
<br/>
<H3>PASO 1:</h3>
<p>Presionar el siguiente botón para un nuevo proceso.</p>
<br />
<form method="post" action="borrar_reloj.php" onsubmit="return confirm('Seguro que quiere eliminar los registros');">
<input type="submit" id='delete' class="btn btn-primary" name="delete" value='Eliminar Archivo'></input>
</form>
<br/>
<H3>PASO 2:</h3>
<p>Se deberan CUMPLIR con los siguientes lineaminetos para una importación éxitosa.</p>
<h3>CARACTERISTICAS</h3>
<ul>
<li><b>Formato de Archivo</b>: Se debera guardar en un archivo de excel con extención <strong>CSV.</strong></li>
<li><b>Nombre del archivo</b>: Se debera guardar con el nombre Copia seguido el Número de Semana Ejemplo:<strong>copia_1 </strong></li>
<li><b>Campos</b> :Solo se necesitaran los campos <strong>No.de control</strong> , <strong>Fecha y Hora sin truncar </strong> y <strong>Nùmero de Semana.</strong></li>
<li><h3><b>Ejemplo: </b> </h3><strong><H3>25;2018-04-21 15:19:05;10</strong></h3></li>
</ul>
<br/>
<div class="container">
<div class="row">
<h3 style="text-align:center">NUEVA IMPORTACIÓN DE EXCEL</h3>
</div><br/>
<form action="importacion_excel.php" class="formulariocompleto" method="post" enctype="multipart/form-data">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="file" name="archivo" class="form-control"/><br/>
<input type="submit" value="SUBIR ARCHIVO" class="btn btn-primary" name="enviar">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div><!-- /page content -->
Codigo ejemplo de Progress Bar
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 1%;
height: 30px;
background-color: #4CAF50;
}
</style>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>