Ajouter une barre de progression discrète aux téléchargements de fichiers anciens

Vous connaissez tous la nouvelle génération de téléchargements de fichiers sophistiqués, en grande partie basés sur Flash, comme SWFUpload qui peut afficher une barre de progression lors de l'envoi – une excellente amélioration, en particulier pour les connexions faibles et à faible bande passante.

Cependant, ces uploaders apportent leur propre logique de gérer les téléchargements côté client. Je recherche une manière discrète de "fancifier" les téléchargements de fichiers classiques existants, c'est-à-dire d' introduire une barre de progression dans des formes de téléchargement de fichiers normales .

En raison de l'architecture de l'envoi de fichiers, il est très probable que cela ne soit possible qu'avec certains ajustements du côté client.

Je cherche une solution qui maintient le réglage à un minimum absolu, par exemple, un composant qui s'ajoute à l'événement onsubmit d'une forme normale, effectue le téléchargement du fichier, affiche une belle barre de progression, met le fichier temporaire (côté serveur) résultant Chemin dans la forme, et la soumet. Sur le côté du serveur, je dois simplement modifier mon script pour utiliser le chemin du fichier fourni par le chargeur flash, au lieu de $ _FILES et consorts, et réfléchir à la sécurité pour un moment.

Ce n'est pas exactement ce que font tous les uploaders basés sur Flash: ils peuvent utiliser les données à partir d'un formulaire, mais ils ne fournissent pas de possibilités de soumettre le formulaire tel quel, ce que je recherche. Je cherche une fonction de téléchargement (probablement) basée sur Flash prise un peu plus loin .

Nous avons implémenté cela très simplement en installant PECL extension pecl-uploadprogress et ajouté un simple rappel AJAX aux formulaires:

Générer une clé de téléchargement:

 $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; }

Créez un gestionnaire de rappel AJAX (p. Ex. 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) { ...

Téléchargez jQuery et les bibliothèques jQuery.uploadprogress (qui comprend également l'extrait ci-dessus) et vous intègre avec votre formulaire:

 <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>

Ajoutez ceci à votre formulaire de téléchargement:

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

Cela devrait faire l'affaire. Ceci est extrait de notre base de code et peut ne pas fonctionner hors-de-la-boîte. Mais il devrait vous dire l'idée.

Si vous utilisez PHP 5.2 et que ce tutoriel de progression de téléchargement de fichiers par IBM peut vous aider.

Ce tutoriel de téléchargement de fichiers multiples utilise jQuery + AJAX Upload … Utilise $ _FILES du côté du serveur et transformera un <div> spécial du côté client pour créer un <formulaire>. Je suppose que vous pourriez l'adapter à vos besoins.

Si vous modifiez le dernier est trop délicat, Uber-Uploader sur SourceForge est une autre option.

Il existe des dizaines de projets open source couvrant ce sujet. Malheureusement, ce n'est pas quelque chose de trivial à mettre en œuvre de façon transparente (du moins comme vous le souhaitez, sinon nous aurions vu cela dans les bons vieux jours de Netscape déjà).

Sur le bon côté, HTML5 facilitera cela comme vous pouvez le voir dans cette démo et celle-ci .

J'espère que cela vous aide et bonne chance avec votre intégration.

Jquploader utilise l'information dans le formulaire, comme la valeur de l'attribut d'action comme script de chargement. Mais je ne l'ai pas mise à jour depuis un moment et il manque de tous les scripts de ceintures et sifflets comme le téléchargement (ce qui est un excellent script btw). Voyez si cela pourrait être une base pour vous de modifier.

La technique utilisée dans Uploadify (un plugin jQuery) répond-elle à vos besoins? Démonstration

Comme je suis drôle, je viens de voir le blog de Simon Willison sur Plupload , qui est une bibliothèque de JavaScript qui, je pense, gère les barres de progression de téléchargement (entre autres).

Il utilise Flash, Silverlight ou tout ce qui est disponible, mais je pense que vous résume tout cela, alors vous téléchargez toujours avec un formulaire HTML régulier.

Vous devrez vérifier la taille de la partie du fichier qui est déjà sur le serveur, puis l'obtenir sur le Client par Ajax où vous pouvez peindre la barre de progression. (N'oubliez pas de vérifier la taille du trou Données avant, pour calculer le percantage ;-))