estoy haciendo una subida de imágenes, y quiero hacer una barra de progreso real, hasta que la imagen se guarde.
tengo el siguiente formulario: HTML
<form action="../Ggrafico/index.php" id="frm-test" method="POST" enctype="multipart/form-data">
<div class="card-body" style="text-align: center;">
<img src="../img_web/subir.webp" id="imag" width="200" height="145">
<br> <br><hr>
<h6 class="text-muted card-subtitle mb-2" style="border-color: #000000;color: #000000;">Suba su imagen </h6>
<div class="container-input">
<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} archivos seleccionados" multiple accept="jpeg,png,gif,jpg" required onchange="verImga()"/>
<label for="file-1">
<svg xmlns="http://www.w3.org/2000/svg" class="iborrainputfile" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg>
<span class="iborrainputfile">Seleccionar archivo</span>
</label>
</div>
<hr>
<div style="text-align: center;margin-left: 28%;">
<input type="submit" id="imgq" class="form-control" name="imagenes[]" accept=".jpg, .jpeg, .png" value="Guardar" style="width: 55%;text-align: center;background-color: #329c54">
</div>
<div class="btn-group" role="group"></div>
<p class="card-text"></p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 0%" id="upload-progress" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
onchange="verImga()"/>
dejo codigo:
// PREVIER /////
function verImga(){
let imagen=document.getElementById('file-1').files[0];
const reader = new FileReader();
reader.onload = function(e) {
const filePath = e.target.result; // Get the file path as a data URL
document.getElementById('imag').src=filePath;
};
reader.readAsDataURL(imagen);
//document.getElementById('imag').src=imagen;
}
es un pequeño código en javascript para visualizar la imagen,
Lo que necesito (he buscado en internet y por lo menos a mi no me sale o no entiendo) muchos codigos , en jquery, yo estoy de apoco con tutoriales estudiando javascript puro, hay un codigo que me hace la barra de progreso pero me queda en la mimsma pantalla y yo necesito que haga el proceso de la barra de progreso y valla a donde se suba la imagen u/a otro alrchivo... no al mismo de donde envio la imagen. espero que se entienda. saludos a todos, gracias de antemano.