Creando una barra de progreso de carga personalizada

Question

He visto todos los complementos de la barra de progreso de carga, widgets, etc. - todos son malos. Son demasiado voluminosos con un código demasiado inútil o no funcionan.

Lo que quiero saber es dónde puedo leer sobre cómo mostrar un indicador de progreso de carga fácil. La mayoría de los navegadores tienen una barra de progreso de estado en ellos a continuación, pero no es muy profesional usar eso solo cuando se trata con clientes.

¿Cómo lo hace el navegador? Quiero saber las funciones internas de cómo funciona el navegador para indicar el estado de algo que se está cargando para que pueda hacer algo con PHP & jquery.

Gracias.

Answer 1

Javascript/Ecmascript no puede meterse con functionalitys navegador nativo (que utiliza C/C++ su mayoría junto con OS APIs que el acceso TCP/UDP zócalos.

Para mostrar la barra de progreso con JS necesita serverfeedback. Eso se puede lograr mediante el uso de un servidor polling como COMET de instancia Pero en este punto, nunca es tan precisa como la barra de progreso del buildin del navegador. Cambiará quizás con HTML5 WebSockets.

Para tener un resultado preciso, necesita un continuo s conexión. Puede fake y gild el retraso de solicitud de cliente-servidor, pero todavía está allí. No sé exactamente cómo Flash maneja este problema, pero supongo que tampoco tiene transmisión orientada a la conexión (corrígeme si me equivoco aquí).

Answer 2

No hay método confiable para obtener el progreso de una carga de archivos mediante JavaScript. El soporte para el evento XMLHttpRequest upload.onprogress falta en muchos navegadores, incluso con HTML5, inevitablemente tendrá que recurrir a Flash u otro método de carga de archivos.

Después de preguntar this question, finalmente decidí usar plupload para mis necesidades de carga.

Answer 3

Dado que desea utilizar PHP, comenzaría con uploadprogress extension (PHP no proporciona, por defecto, ningún dato hasta que se complete la carga, esta extensión proporciona dicha funcionalidad del lado del servidor). Tenga en cuenta que es requiere PHP 5.2+ y puede ser exigente con las opciones de configuración. También vea su commentary and demo y troubleshooting hints). Una breve descripción disponible en la documentación de PHP comments.

Usando la extensión, puede obtener algunas estadísticas sobre la carga; entonces puedes sondear el servidor a través de AJAX y actualizar algún tipo de barra de progreso.

a ser un poco más específico:

• obtener un identificador único para el formulario, e incluirla en un campo oculto
• la carga se debe ejecutar en un IFRAME - algunos navegadores no permitirán DOM actualizaciones en la misma página que está ejecutando la carga
• sondee el servidor a través de AJAX (usando el identificador para especificar qué carga le interesa) y analice el resultado (IIRC, obtendrá algo como "bytes_uploaded => 123 , content-length => 1000 ")
• actualice su barra de progreso (la forma en que se visualiza es de usted, yo uso "x% hecho", además de una barra gráfica)
• redirigir página entera cuando la forma subido OK

(Ah, y por cierto, comprobar la configuración upload_max_filesize y post_max_size de PHP , ya que tanto el límite de tamaño máximo de carga)

Answer 4

sé que esto no es lo que estás buscando, pero he estado utilizando para la carga de plupload recientemente y parece bastante bueno, más doesnt confiar en flash o HTML5 exclusivamente

ejemplo:

---

• la URL es la página Proccessing (php archivo)
• contenedor = el div padre o formar esa que el botón de subida vidas en (su realmente importante establecer esto - hay algunos ejemplo de cómo se puede adjuntar cosas a ciertas acciones que plupload hace. por ejemplo a continuación puede ver que he adjuntado uploader.start(); al gancho uploader.start();.
• también debe ser capaz de ver lo que he hecho una barra de progreso de carga personalizada, mediante la fijación al gancho de progreso de carga

---

vale la pena preguntar preguntas en el foro en el sitio plupload si recibe atrapados, ¡son buenos para responderlos!

$(function(){ 
    //plupload 
    var uploader = new plupload.Uploader({ 
     runtimes : 'gears,html5,flash', 
     browse_button : 'pickfiles', 
     container : 'form_2', 
     max_file_size : '10mb', 
     url : '<?php echo SITE_ROOT ?>plupload/upload.php', 
     //resize : {width : 320, height : 240, quality : 90}, 
     flash_swf_url : '<?php echo SITE_ROOT ?>plupload/js/plupload.flash.swf', 
     filters : [ 
      {title : "Image files", extensions : "jpg,gif,png"} 
     ] 
    }); 


uploader.init(); 

uploader.bind('FilesAdded', function(up, files) { 
    uploader.start(); 
}); 

uploader.bind('UploadProgress', function(up, file) { 
    if(file.percent < 100 && file.percent >= 1){ 
     $('#progress_bar div').css('width', file.percent+'%'); 
    } 
    else{ 
     $('#progress_bar').fadeOut(600); 
    }        
});