0

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&nbsp;</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.

2
  • 1
    Parte importante de la cultura del sitio es que al publicar una pregunta se muestre un esfuerzo por parte del autor al incluir el código que ha intentado o lo que ha investigado ya que en este sitio no hacemos tareas/proyectos/trabajos. Lecturas recomendadas: Cómo preguntar y ejemplo mínimo verificable. Por favor oprime editar y agrega lo que has intentado o haz una pregunta específica sobre un error o problema que tienes para implementar TU solución a la tarea/proyecto. Reduce el código que publicas a un ejemplo mínimo verificable.
    – jachguate
    Commented el 10 jul. a las 21:59
  • Adicional a lo que ya te han mencionado, favor aclarar el flujo o proceso que tienes en mente, porque lo último que has señalado no se entiende
    – Yussef
    Commented el 11 jul. a las 6:15

2 respuestas 2

0

he logrado hacer que funcione, muy lindo y básico, no se si se puede hacer, cuando el archivo es enviado a subir.php, que se quede en esa pagina y no en la que subo la imagen.Gracias.

formulario:

   <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <form action="" id="form_subir">
        <div class="form-1-2">
            <label for=""> Archivo a subir:</label>
            <input type="file" name="archivo" require>
        </div>
        <div class="barra">
        <div class="barra_azul" id="barra_estado">
            <span></span>
            </div>
        </div>
        <div class="acciones">
            <input type="submit" class="btn" value="Enviar">
            <input type="submit" class="cancel"  id="cancelar" value="Cancelar">
        </div>
    </form>
   <script src="main.js"></script>
</body>
</html>

mi main.js

document.addEventListener("DOMContentLoaded", () =>{ 
    let form = document.getElementById('form_subir');
    form.addEventListener("submit", function(event){
        event.preventDefault();
        subir_archivos(this);

    });

});
function subir_archivos(form){
let barra_estado = form.children[1].children[0], 
span = barra_estado.children[0],
boton_cancelar = form.children[2].children[1];

barra_estado.classList.remove('barra_verde', 'barra_roja');


// peticion ajax

let peticion = new XMLHttpRequest();
peticion.upload.addEventListener("progress", (event)=> {

let porcentaje = Math.round((event.loaded / event.total) * 100);


console.log(porcentaje);

barra_estado.style.width = porcentaje+'%';
span.innerHTML= porcentaje+'%';

});
// finalizado

peticion.addEventListener("load",() => { 
    barra_estado.classList.add('barra_verde');
    span.innerHTML = "Proceso completado"; 
});
// enviar datos

peticion.open('post', 'subir.php');
peticion.send(new FormData(form))

//cancelar

boton_cancelar.addEventListener("click", () => {
    peticion.abort();
    barra_estado.classList.remove('barra_verde');
    barra_estado.classList.add('barra_roja');

    span.innerHTML= "Proceso cancelado";

});


}

Gracias, si no se puede, tratare de otra forma, saludos cordiales

-1

Hola gracias por responder, es simple tengo un formulario que elije una imagen y la manda a otro archivo php para que la suba al servidor, y quería hacer la barra de progreso, tengo una hecha que no funciona,.

cuando funciono, subía la imagen pero me quedaba la pantalla del formulario, y lo que necesito es que haga el progreso de subir y se quede en la pagina de php donde sube el archivo. dejo código:

   function UploAd(){
    var formData = new FormData();
    var progress=0;
let fl=document.getElementById('frm-test').files;
if(fl[0].name===undefined){
  return;
}
for (var x = 0; x < fl.length; x++) {
formData.append('imagenes[]', document.getElementById('imagenes').files[x]);
}
 var xhr = new XMLHttpRequest();
  xhr.open("POST", "../Ggrafico/index.php");
  xhr.onload = function() {
    if (xhr.status === 200 && progress===100) {
      // alert("se subio correctamente!");
      location.href='./decido.php';
    } else {
      alert("error al subir.");
    }
  };

  xhr.upload.onprogress = function(event) {
     progress = (event.loaded / event.total) * 100;
    document.getElementById("upload-progress").style ='width:'+ progress +'%';
  };

  xhr.send(formData);
}

espero que se entienda, es subir una imagen , hacer la barra de progreso y quedarse donde se subió la imagen. Gracias. Saludos.

1
  • Esta es la sección de respuestas. Borra tu no-respuesta, y edita tu pregunta para proporcionar más detalles.
    – padaleiana
    Commented el 11 jul. a las 19:38

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.