php - subir - Agregar una barra de progreso discreta a las cargas de archivos de la vieja escuela

subir archivo con javascript y php

Question

Todos conocen la nueva generación de cargadores de archivos sofisticados, en su mayoría basados ​​en Flash, como SWFUpload, que pueden mostrar una barra de progreso mientras se cargan, una gran mejora, especialmente para las conexiones inestables y con poco ancho de banda.

Sin embargo, todos estos cargadores traen su propia lógica de cómo manejar las cargas en el lado del cliente. Estoy buscando una forma discreta de "fancificar" las cargas clásicas de archivos existentes, es decir, introducir una barra de progreso en los formularios normales de carga de archivos .

Debido a la arquitectura de carga de archivos, lo más probable es que esto no sea posible sin algunos ajustes en el lado del cliente.

Estoy buscando una solución que mantenga los ajustes al mínimo absoluto, por ejemplo, un componente que se agregue al evento onsubmit de una forma normal, realice la carga del archivo, muestre una barra de progreso agradable, coloque el archivo temporal resultante (del lado del servidor) Ruta en el formulario, y lo envía. En el lado del servidor, solo tengo que modificar mi script para usar la ruta de acceso del archivo que proporciona el programa de carga flash, en lugar de $ _FILES y consorts, y pensar en la seguridad por un momento.

Esto no es exactamente lo que hacen todos los cargadores basados ​​en Flash: pueden usar datos de un formulario, pero no ofrecen la posibilidad de enviar el formulario tal como está, qué es lo que estoy buscando. Estoy buscando una (probablemente) función de carga basada en Flash un paso más allá .

Answer 1

¿La técnica utilizada en Uploadify (un complemento de jQuery) satisface sus necesidades? Demo

Answer 2

Qué gracioso, acabo de ver el blog de Simon Willison sobre Plupload , que es una biblioteca de JavaScript que creo que hace barras de progreso de carga de archivos (entre otras cosas).

Utiliza Flash, Silverlight o lo que esté disponible, pero creo que eso lo extrae de usted, por lo que aún se está cargando con un formulario HTML normal.

Answer 3

Si usa PHP 5.2 y este tutorial de progreso de carga de archivos de IBM puede ayudarlo.

Este tutorial de carga de múltiples archivos usa jQuery + AJAX Upload ... Usa $ _FILES en el lado del servidor y transformará un <div> especial en el lado del cliente para hacer un <form>. Supongo que podrías modificarlo para que se ajuste a tus necesidades.

Si ajustar el último es demasiado complicado, Uber-Uploader en SourceForge es otra opción.

Hay docenas de proyectos de código abierto que cubren este tema. Desafortunadamente, esto no es algo trivial para implementar sin problemas (al menos de la manera que usted quiere, de lo contrario, ya lo habríamos visto en los viejos tiempos de Netscape).

En el lado positivo, HTML5 facilitará esto como se puede ver en esta demostración y en esta .

Espero que esto ayude y buena suerte con su integración.

Answer 4

Tendrá que verificar el tamaño de la parte del archivo que ya está en el Servidor, luego obtenerlo en el Cliente por Ajax donde puede pintar la barra de progreso. (Recuerde verificar el tamaño de los datos del agujero antes, para calcular el porcentaje ;-))

Answer 5

jquploader usa la información dentro del formulario, como el valor del atributo de acción como script de carga. Pero no lo he actualizado en mucho tiempo y carece de todos los scripts de cinturones y silbidos como el de uploadify (que es un excelente script por cierto). Mira si podría ser una base para que pellizcases.

Answer 6

Implementamos esto de manera muy sencilla instalando la extensión PECL pecl-uploadprogress y agregamos una simple devolución de llamada AJAX a los formularios:

Generar una clave de carga:

$upload_id = genUploadKey();
function genUploadKey ($length = 11) {
  $charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  for ($i=0; $i < $length; $i++)
    $key .= $charset[(mt_rand(0,(strlen($charset)-1)))];
  return $key;
}

Cree un controlador de devolución de llamada AJAX (por ejemplo, uploadprogress.php):

extract($_REQUEST);

// servlet that handles uploadprogress requests:
if ($upload_id) {
  $data = uploadprogress_get_info($upload_id);
  if (!$data)
    $data[''error''] = ''upload id not found'';
  else {
    $avg_kb = $data[''speed_average''] / 1024;
    if ($avg_kb<100)
      $avg_kb = round($avg_kb,1);
    else if ($avg_kb<10)
      $avg_kb = round($avg_kb,2);
    else $avg_kb = round($avg_kb);

    // two custom server calculations added to return data object:
    $data[''kb_average''] = $avg_kb;
    $data[''kb_uploaded''] = round($data[''bytes_uploaded''] /1024);
  }

  echo json_encode($data);
  exit;
}

// display on completion of upload:
if ($UPLOAD_IDENTIFIER) {
...

Descargue jQuery y las bibliotecas jQuery.uploadprogress (que también incluyen el fragmento de código anterior) e intégrelas con su formulario:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.uploadprogress.0.3.js"></script>
<script type="text/javascript">
jQuery(function () {
    // apply uploadProgress plugin to form element
    // with debug mode and array of data fields to publish to readout:
    jQuery(''#upload_form'').uploadProgress({
        progressURL:''uploadprogress.php'',
        displayFields : [''kb_uploaded'',''kb_average'',''est_sec''],
        start: function() {
            $(''.upload-progress'').show();
        },
    success: function() {
            $(''.upload-progress'').hide();
            jQuery(this).get(0).reset();
        }
    });
});
</script>

Agregue esto a su formulario de carga:

<input name="UPLOAD_IDENTIFIER" type="hidden" value="$upload_id" />

Eso debería hacer el truco. Esto se extrae de nuestra base de código y es posible que no funcione de manera inmediata. Pero debería decirte la idea.