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
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.
Veuillez cliquer sur le bouton Sélectionner le fichier ci-dessous, puis cliquez sur Démarrer le téléchargement pour expérimenter cette démo.
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', function (file) {$ ('#' + file.id) .find ('p.state'). text ('uploaded');}); uploader.on ('uploadError', function (file) {$ ('#' + file.id) .find ('p.state'). text ('upload error');}); uploader.on ('uploadComplete', function (file) {$ ('#' + file.id) .find ('. Progress'). fadeout ();}); uploader.on ('uploadComplete', function (file) {$ ('#' + file.id) .find ('. Progress'). fadeout ();});Téléchargement d'image
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
// Initialiser Web uploader var 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écepteur du serveur. Server: 'http://webuploger.duapp.com/Server/filepload.phep', //webuploger.duapp.com/Server/fileupload.Pload. 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'); // $ list est une liste de contenu $ $ insigne $. ); ));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), $ pour cent = $ li.find ('. Progress Span'); // éviter la création répétée if (! $ %.length) {$% = $ ('<p> <pan> </span> </p>') .APPENDTO ($ li) .find ('span');} $ 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 fichiers a échoué et une erreur de téléchargement a été affichée. uploader.on ('uploadError', function (file) {var $ li = $ ('#' + file.id), $ error = $ li.find ('div.error'); // éviter la création répétée if (! $ error.length) {$ error = $ ('<div> </ div>'). // Une fois le téléchargement 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 les connaissances pertinentes qui vous sont présentées en utilisant le téléchargeur Web pour obtenir un téléchargement multi-fichiers. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!