• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

146
Vistas
Barra de progreso de exploración de archivos sin Ajax (solo HTML CSS y JS/Jquery)
  • Estoy explorando un archivo grande, así que quiero mostrar la barra de progreso de exploración de archivos.
  • No necesito usar ajax,
  • Solo quiero mostrar la barra de progreso y el porcentaje de progreso al navegar o arrastrar el archivo desde el navegador.

Pero desafortunadamente no obtuve una referencia sin ajax, por eso solo publico aquí

Código de muestra

 function uploadFile() { var file = _("file1").files[0]; var formdata = new FormData(); formdata.append("file1", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "index.php"); ajax.send(formdata); } function progressHandler(event) { _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent) + "% uploaded... please wait"; } function completeHandler(event) { _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; //wil clear progress bar after successful upload } <div class="col-md-6"> <label class="lbl mandatory" for="">Image</label> <input type="file" name="file1" id="file1" onchange="uploadFile()"><br> <progress id="progressBar" value="0" max="100" style="width:300px;"> </progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </div>
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Creo que no puedes manejar esto sin Ajax. Puede manejar fácilmente el porcentaje de progreso con Dropzone.js

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda