Le composant de téléchargement de fichiers Webuploader peut utiliser entièrement les avantages de HTML5 dans les navigateurs modernes, tout en n'abandonnant pas les navigateurs traditionnels IE, en utilisant le Flash Runtime d'origine, et est compatible avec IE6 +, iOS 6+, Android 4+. Les deux ensembles de temps d'exécution, la même méthode d'appel peut être sélectionnée par les utilisateurs à volonté. L'utilisation de la fragmentation de fichiers importante en téléchargement simultané améliore considérablement l'efficacité du téléchargement de fichiers.
1. Fonction Introduction
Rupture, concurrence
La rupture et la concurrence se combinent pour diviser un grand fichier en plusieurs blocs et télécharger simultanément, améliorant considérablement la vitesse de téléchargement des fichiers volumineux.
Lorsque les problèmes de réseau provoquent des erreurs de transmission, il vous suffit de retransmettre le fragment d'erreur, pas le fichier entier. De plus, la transmission de Shard peut suivre les progrès du téléchargement plus en temps réel.
Aperçu, compression
Prend en charge les formats d'image communs JPG, JPEG, GIF, BMP, PNG Aperçu et compression pour enregistrer la transmission des données réseau.
Analysez les méta-informations dans JPEG et gérez correctement diverses orientations. Dans le même temps, après compression, téléchargez et conservez toutes les méta-données d'origine de l'image.
Ajouter des fichiers via plusieurs canaux
Prend en charge la sélection de fichiers multiples, le filtrage de type, glisser-déposer (fichier et dossier) et les fonctions de collage d'images.
La fonction de pâte se reflète principalement dans le fait que lorsqu'il existe des données d'image dans le presse-papiers (outils de capture d'écran tels que QQ (Ctrl + Alt + A), cliquez avec le bouton droit sur l'image dans la page Web et cliquez sur Copier), Ctrl + V peut ajouter ce fichier image.
Html5 & flash
Compatible avec les navigateurs grand public, les interfaces cohérentes et implémentez deux ensembles de support d'exécution, afin que les utilisateurs n'aient pas besoin de se soucier des noyaux utilisés en interne.
Dans le même temps, la partie flash ne fait aucun travail lié à l'interface utilisateur, ce qui est pratique pour les utilisateurs qui ne se soucient pas de l'expansion de Flash et des besoins commerciaux personnalisés.
Md5 Seconds Pass
Lorsque la taille du fichier est grande et que la quantité est relativement grande, elle prend en charge la vérification de la valeur MD5 avant le téléchargement. S'il est cohérent, vous pouvez le sauter directement.
Si le serveur et le frontal modifient l'algorithme uniformément et prennent le segment MD5, il peut considérablement améliorer les performances de vérification et prendre environ 20 ms.
Facile à développer et détachable
Le mécanisme détachable est adopté pour séparer les fonctions en widgets et peut être apparié librement.
Le code est organisé à l'aide de spécifications AMD, ce qui est clair et clair, ce qui rend pratique les joueurs avancés.
Introduire des ressources
Le téléchargement de fichiers à l'aide du téléchargeur Web nécessite l'introduction de trois ressources: JS, CSS et SWF.
<! - Présentation de CSS -> <link rel = "Stylesheet" type = "text / css" href = "webuploader Folder / webuploader.css"> <! - Introduction de JS -> <script type = "text / javascrip
2. Téléchargement de fichiers
WebUploader contient uniquement l'implémentation sous-jacente des téléchargements de fichiers et n'inclut pas la pièce d'interface utilisateur. Par conséquent, vous pouvez jouer librement les aspects interactifs. Ce qui suit montrera comment implémenter une version simple.
Partie HTML
Tout d'abord, préparez la structure DOM, y compris trois parties: conteneurs qui stockent les informations de fichier, les boutons de sélection et les boutons de téléchargement.
<div id = "uploader"> <! - Utilisé pour stocker les informations du fichier -> <div id = "thelist"> </div> <div> <div id = "picker"> Sélectionnez le fichier </div> <Button id = "ctlbtn"> Démarrer le téléchargement </ bouton> </div> </ div>
Initialiser le téléchargeur Web
Pour plus de détails, veuillez consulter la section des commentaires dans le code.
var uploader = webuploader.create ({// SWF File Path Swf: base_url + '/js/uploader.swf', // Réception de fichier Server. Server: 'http://webuploader.duapp.com/server/filepload.php', // Sélectionner le bouton Fichier. '#Picker', // Pas de compression d'image, par défaut Si c'est JPEG, il le compresse et le téléchargera à nouveau avant le téléchargement!Afficher la sélection des utilisateurs
Étant donné que le webuploader ne gère pas la logique de l'interface utilisateur, il est nécessaire d'écouter l'événement FilequeUed pour l'implémenter.
// Lorsqu'un fichier est ajouté à la file d'attente uploader.on ('filequeued', function (file) {$ list.append ('<div id = "' + file.id + '">' + '<h4>' + file.name + '</h4>' + '<p> attendez upload ... </p>' + '</v>');});Progrès de téléchargement de fichiers
Lorsque le fichier est téléchargé, le téléchargeur Web enverra un événement UploadProgress, qui contient l'objet de fichier et la progression de téléchargement actuelle du fichier.
// Créez une barre de progression à afficher en temps réel pendant le téléchargement de fichiers. uplower.on ('uploadProgress', fonction (fichier, pourcentage) {var $ li = $ ('#' + file.id), $% = $ li.find ('. Progress .Progress-Bar'); // éviter la création répétée de if (! $ pour cent.length) {$% = $ ('<div>' + '<div role = "Progressbar">' + '</ div>' + '</ div>'). APPENDTO ($ li) .find ('. Progress-Bar');} $ li.find ('p.state').Succès du fichier et traitement des échecs
Si le téléchargement de fichiers échoue, l'événement UploadError sera envoyé et si le fichier est téléchargé avec succès, l'événement Téléchargement de la valeur sera envoyé. Indépendamment du succès ou de l'échec, l'événement UploadComplete sera déclenché après le téléchargement du fichier.
uploader.on ('uploadsuccess', fonction (fichier) {$ ('#' + file.id) .find ('p.state'). text ('uploaded');}); uploader.on ('uploadError', function (file) {$ ('#' + file.id) .Find ('p.state'). 'uploadComplete', function (file) {$ ('#' + file.id) .find ('. Progress'). fadeout ();});3. Télécharger des photos
Par rapport aux téléchargements de fichiers ordinaires, cette démo démontre: filtrage de fichiers, prévisualisation d'image, téléchargement de compression d'image et autres fonctions.
Html
Pour implémenter la démo comme ci-dessus, vous devez d'abord préparer un bouton et un conteneur pour stocker la liste d'informations sur les fichiers ajoutés.
<! - Dom Structure Part -> <div id = "uploader-démo"> <! - Utilisé pour stocker l'article -> <div id = "fileList"> </div> <div id = "filepicker"> sélectionner des images </v> </div>
Javascrip
Créer une instance de téléchargement Web
// Initialisez Web uploadVar uploader = webuploader.create ({// // s'il faut télécharger automatiquement après avoir sélectionné le fichier. Auto: true, // Swf File Path SWF: base_url + '/js/uploader.swf', // file réception Server. Server: 'http://webuploader.duapp.com/Server/fileupload.php', //webuploger Bouton.Écoutez l'événement FileQueued et créez un aperçu d'image via uploader.makethumb.
PS: Ce que vous obtenez ici, ce sont les données d'URL de données, et IE6 et IE7 ne prennent pas en charge l'aperçu direct. L'aperçu peut être complété avec Flash ou le serveur.
// Lorsqu'un fichier est ajouté, uploader.on ('filequeued', function (file) {var $ li = $ ('<div id = "' + file.id + '">' + '<mg>' + '<v>' + file.name + '</ div>' + '</ dip>'), $ img = $ li.find ('img'); // $ listre est une liste de contenu $ $ inside. ); ));Ensuite, le reste est l'invite d'état de téléchargement. Lorsque le processus de téléchargement de fichiers est téléchargé, le téléchargement est réussi, le téléchargement a échoué et le téléchargement est terminé, les événements UploadProgress, Téléchargement, UploadError et UploadComplete correspondent respectivement aux événements UploadProgress, Téléchargement, téléchargement, et uploadComplete Events.
// Créez une barre de progression à afficher en temps réel pendant le téléchargement de fichiers. uploadher.on ('uploadProgress', fonction (fichier, pourcentage) {var $ li = $ ('#' + file.id), $% = $ li.find ('. Progress Span'); // éviter la création répétée if (! $ pour cent) {$ pour cent = $ ('<p> <pan> </pan> </p>'). $ pour cent.css ('largeur', pourcentage * 100 + '%');}); // Le fichier est téléchargé avec succès, ajoutez une classe réussie à l'élément et marquez le téléchargement avec style. uploader.on ('uploadsuccess', function (file) {$ ('#' + file.id) .addclass ('upload-state-done');}); // le téléchargement de fichier a échoué et une erreur de téléchargement a été affichée. uploader.on ('uploadError', fonction (fichier) {var $ li = $ ('#' + file.id), $ error = $ li.find ('div.error'); // éviter la création répétée if (! $ error.length) {$ error = $ ('<div> </ div>'). Terminé, il est réussi ou échoué, supprimez d'abord la barre de progression. uploader.on ('uploadComplete', function (file) {$ ('#' + file.id) .find ('. Progress'). Supprime ();});Ce qui précède est une introduction à la façon d'utiliser le plug-in de téléchargement de fichiers de téléchargeur Web. J'espère que cela sera utile à l'apprentissage de tous.