Cómo subir la barra de progreso en JavaScript

JavaScript le proporciona las instrucciones de código necesarios para cargar una barra de progreso, lo que significa que crea una barra de progreso que indica al usuario el estado de un archivo subido. Si el archivo es grande, se necesitan varios minutos para cargar el archivo. Proporcionar una barra de progreso, por lo que el usuario sabe que el sitio está funcionando correctamente y no ha parado de subir el archivo.

Instrucciones

1 Abra el editor de JavaScript preferido y su proyecto de sitio web. También puede editar JavaScript usando un editor HTML.

2 Crear el estilo CSS. El estilo CSS establece la sección de color de la barra, por lo que cada incremento añade más color a otro progreso de la barra. Copiar y pegar el siguiente código CSS para establecer colores y el diseño de la barra:

p bar

{

display: block;
width: 300px;
padding: 2px 5px;
margin: 2px 0;
border: 1px inset #446;
border-radius: 5px;

}

3 Añadir la funcionalidad de JavaScript para el proceso de carga. El código siguiente carga un archivo para el usuario y establece la vista de barra de progreso:

var xhr = new XMLHttpRequest ();

var o = $id("bar");
var progress = o.appendChild(document.createElement("p"));
progress.appendChild(document.createTextNode("upload filename.html"));

Reemplazar "filename.html" con su propio nombre de archivo.

4 Cambiar el color de la barra de progreso para mostrar el porcentaje del progreso de carga como las cargas de archivos en el servidor:

xhr.upload.addEventListener ( "progreso", la función (e) {

var pc = parseInt(100 - (e.loaded / e.total * 100));
bar.style.backgroundPosition = pc + "% 0";