Share
Je n'arrive pas à en arriver au bout des choses amusantes que vous pouvez faire avec les technologies Web émergentes. Aujourd'hui, je vais vous montrer comment faire quelque chose qui - jusqu'à la dernière fois - était presque sans précédent: télécharger des fichiers via AJAX.
Oh, bien sûr, il y a eu des piratages; mais si vous êtes comme moi et que vous vous sentez sale chaque fois que vous tapez iframe, vous allez beaucoup aimer ça. Rejoins-moi après le saut!
Si vous cherchez une solution rapide, il existe une grande collection de scripts et d'applications de téléchargement de fichiers sur Envato Market.я
Ce fichier de téléchargement HTML5 est particulièrement astucieux - vous pouvez ajouter des fichiers facilement en les faisant glisser, en les déposant ou en cliquant dessus. Tous les fichiers seront téléchargés via AJAX ou peuvent être ajoutés dans un formulaire et les fichiers peuvent être renommés avant le téléchargement. Une excellente solution rapide si c'est ce que vous cherchez!
Pourquoi n'entendons-nous pas la mauvaise nouvelle??
Cela ne fonctionne pas dans tous les navigateurs. Cependant, avec quelques améliorations progressives (ou quel que soit le mot à la mode actuel), nous aurons une page de téléchargement qui fonctionnera directement sur IE6 (bien que sans les bits AJAXy).
Notre téléchargement AJAX fonctionnera aussi longtemps que
Données de formulaireest disponible; sinon, l'utilisateur recevra un téléchargement normal.
Notre projet comporte trois composantes principales.
Accentsconagua
plusieurs attribut sur le fichier contribution élément.FileReader objet de la nouvelle API de fichier.Données de formulaire objet de XMLHttpRequest2.Nous utilisons le plusieurs attribut permettant à l’utilisateur de sélectionner plusieurs fichiers à télécharger (le téléchargement de plusieurs fichiers fonctionnera normalement même si Données de formulaire n'est pas disponible). Comme vous le verrez, FileReader nous permet d'afficher les miniatures des fichiers téléchargés par l'utilisateur (nous attendons des images).
Aucune de nos trois fonctionnalités ne fonctionne dans IE9, de sorte que tous les utilisateurs d'IE acquerront une expérience de téléchargement normale (bien que je sache que la prise en charge de 'FileReader' est disponible dans IE10 Dev Preview 2). FileReader ne fonctionne pas dans la dernière version de Safari (5.1), ils n'auront donc pas les vignettes, mais ils recevront le téléchargement AJAX et le message de confirmation. Enfin, Opera 10.50 a FileReader soutien mais pas Données de formulaire soutien, afin qu'ils obtiennent des vignettes, mais les envois normaux.
Avec ça, passons au codage!
Commençons par quelques balises et styles de base. Bien sûr, ce n’est pas la partie principale de ce tutoriel, je ne vous traiterai pas comme un novice..
API de fichier HTML5 Téléchargez vos images
Assez basique, hein? Nous avons un formulaire qui poste à upload.php, que nous examinerons dans une seconde, et un seul élément d’entrée, de type fichier. Notez qu'il a le booléen plusieurs attribut, qui permet à l'utilisateur de sélectionner plusieurs fichiers à la fois.
C'est vraiment tout ce qu'il y a à voir ici. Allons-nous en.
corps font: 14px / 1.5 helvetica-neue, helvetica, arial, san-serif; rembourrage: 10px; h1 margin-top: 0; #main width: 300px; marge: auto; arrière-plan: #ecec; rembourrage: 20px; bordure: 1px solide #ccc; # image-list list-style: none; marge: 0; rembourrage: 0; # liste d'images li background: #fff; bordure: 1px solide #ccc; text-align: center; rembourrage: 20px; marge inférieure: 19px; # image-list li img width: 258px; alignement vertical: milieu; bordure: solide 1px # 474747;
Absolument pas de choc ici.
Nous devons également être en mesure de gérer les téléchargements de fichiers à l’arrière-plan, couvrons-le ensuite..
$ error) if ($ error == UPLOAD_ERR_OK) $ name = $ _FILES ["images"] ["name"] [$ key]; move_uploaded_file ($ _FILES ["images"] ["tmp_name"] [$ key], "uploads /". $ _FILES ["images"] ["nom"] [$ key]); écho "Images téléchargées avec succès
";
N'oubliez pas que c'étaient les premières lignes de PHP que j'avais écrites facilement en un an (je suis un gars de Ruby). Vous devriez probablement en faire un peu plus pour la sécurité; Cependant, nous veillons simplement à ce qu'il n'y ait pas d'erreur de téléchargement. Si tel est le cas, nous utilisons la fonction intégrée move_uploaded_file pour le déplacer vers un les téléchargements dossier. N'oubliez pas de vous assurer que le dossier est en écriture.
Donc, maintenant, nous devrions avoir un formulaire de téléchargement fonctionnel. Vous choisissez une image (multiple, si vous le souhaitez et que votre navigateur vous le permet), cliquez sur le bouton ?Télécharger des fichiers!? bouton, et vous obtenez le message ?Images téléchargées avec succès.?
Voici à quoi ressemble notre mini-projet jusqu'à présent:
Mais, allez, on est en 2011: on veut plus que ça. Vous remarquerez que nous avons lié jQuery et un upload.js fichier. Faisons éclater cette ouverture maintenant.
Ne perdons pas de temps: c'est parti!
(function () var input = document.getElementById ("images"), formdata = false; if (window.FormData) formdata = new FormData (); document.getElementById ("btn"). style.display = "none "; (); Voici par quoi nous commençons. Nous créons deux variables: contribution est notre élément d'entrée de fichier; Données de formulaire sera utilisé pour envoyer les images au serveur si le navigateur le permet. Nous l'initialisons à faux puis vérifiez si le navigateur prend en charge Données de formulaire; Si c'est le cas, nous créons un nouveau Données de formulaire objet. De plus, si nous pouvons envoyer les images avec AJAX, nous n’avons pas besoin de «télécharger des images». bouton, donc nous pouvons le cacher. Pourquoi n'en avons-nous pas besoin? Eh bien, nous allons télécharger automatiquement par magie les images immédiatement après que l'utilisateur les sélectionne.
Le reste du code JavaScript entrera dans votre fonction invocatrice anonyme. Nous créons ensuite une petite fonction d’aide qui montrera les images une fois que le navigateur les aura:
function showUploadedItem (source) var list = document.getElementById ("liste-images"), li = document.createElement ("li"), img = document.createElement ("img"); img.src = source; li.appendChild (img); list.appendChild (li); La fonction prend un paramètre: la source de l'image (nous verrons comment nous l'obtiendrons bientôt). Ensuite, nous trouvons simplement la liste dans notre balisage et créons un élément de liste et une image. Nous définissons la source de l'image sur la source reçue, plaçons l'image dans l'élément de liste et plaçons l'élément de liste dans la liste. Voila!
Ensuite, nous devons prendre les images, les afficher et les télécharger. Comme nous l'avons dit, nous le ferons lorsque le sur le changement événement est déclenché sur l'élément d'entrée.
if (input.addEventListener) input.addEventListener ("change", fonction (evt) var i = 0, len = this.files.length, img, lecteur, fichier; document.getElementById ("réponse"). innerHTML = "Téléchargement?" Pour (; i < len; i++ ) file = this.files[i]; if (!!file.type.match(/image.*/)) , false); Nous n'avons pas à nous soucier du modèle d'événement propriétaire d'IE, car IE9 + prend en charge la fonction standard addEventListener..
Il y a plus, mais commençons par ceci. Tout d’abord, nous n’avons pas à nous soucier du modèle d’événement propriétaire d’IE, car IE9 + prend en charge la norme. addEventListener fonction (et IE9 et vers le bas ne supportent pas nos nouvelles fonctionnalités).
Alors, que voulons-nous faire lorsque l'utilisateur a sélectionné les fichiers? Tout d'abord, nous créons quelques variables. Le seul important en ce moment est len = this.files.length. Les fichiers que l'utilisateur a sélectionnés seront accessibles à partir de l'objet this.files. En ce moment, nous ne nous intéressons qu'au longueur propriété, afin que nous puissions boucler sur les fichiers?
? ce qui est exactement ce que nous faisons ensuite. Dans notre boucle, nous définissons le fichier actuel sur fichier pour la facilité d'accès. La prochaine chose que nous faisons est de confirmer que le fichier est une image. Nous pouvons le faire en comparant les type propriété avec une expression régulière. Nous recherchons un type qui commence par? Image? et est suivi par n'importe quoi. (Le double coup devant ne fait que convertir le résultat en booléen.)
Alors, que faisons-nous si nous avons une image sur nos mains?
if (window.FileReader) reader = new FileReader (); reader.onloadend = function (e) showUploadedItem (e.target.result); ; reader.readAsDataURL (fichier); if (formdata) formdata.append ("images []", fichier); Nous vérifions si le navigateur prend en charge la création FileReader objets. Si c'est le cas, nous en créerons un.
Voici comment nous utilisons un FileReader objet: nous allons passer notre fichier objecter à la reader.readAsDataURL méthode. Cela crée une URL de données pour l'image téléchargée. Cela ne fonctionne pas comme prévu, cependant. L'URL de données n'est pas renvoyé de la fonction. Au lieu de cela, l'URL de données fera partie d'un objet événement.
Dans cet esprit, nous devrons enregistrer une fonction sur le reader.onloadend un événement. Cette fonction prend un objet événement, par lequel on obtient l'URL des données: c'est à e.target.result (Oui, e.target est le lecteur objet, mais j'ai eu des problèmes lors de l'utilisation lecteur au lieu de e.target dans cette fonction). Nous allons simplement passer cette URL de données à notre showUploadedItem fonction (que nous avons écrit ci-dessus).
Ensuite, nous vérifions la Données de formulaire objet. Rappelez-vous, si le navigateur prend en charge Données de formulaire, Données de formulaire va etre un Données de formulaire objet; sinon, ce sera faux. Donc, si nous avons un Données de formulaire objet, nous allons appeler le ajouter méthode. Le but d'un Données de formulaire objet est de contenir les valeurs que vous soumettez via un formulaire; alors le ajouter méthode prend simplement une clé et une valeur. Dans notre cas, notre clé est images[]; en ajoutant les crochets à la fin, nous nous assurons que chaque fois que nous ajouter une autre valeur, nous ajoutons en fait à ce tableau, au lieu d'écraser le image propriété.
Nous avons presque fini. Dans notre boucle for, nous avons affiché chacune des images pour l'utilisateur et les avons ajoutées au Données de formulaire objet. Maintenant, nous avons juste besoin de télécharger les images. En dehors de pour boucle, voici la dernière pièce de notre puzzle:
if (formdata) $ .ajax (url: "upload.php", type: "POST", données: formdata, processData: false, contentType: false, succès: function (res) document.getElementById ("réponse" ) .innerHTML = res;); Encore une fois, nous devons nous assurer que nous avons Données de formulaire soutien; si nous ne le faisons pas, le fichier "Upload Files!" bouton sera visible, et c’est ainsi que l’utilisateur téléchargera les photos. Cependant, si nous avons Données de formulaire support, nous nous chargerons du téléchargement via AJAX. Nous utilisons jQuery pour gérer toutes les bizarreries d'AJAX sur les navigateurs..
Vous êtes probablement familier avec jQuery $ .ajax méthode: vous lui passez un objet options. le url, type, et Succès les propriétés devraient être évidentes. le Les données la propriété est notre Données de formulaire objet. Remarquez ceux données de processus et contentType Propriétés. Selon la documentation de jQuery, données de processus est vrai par défaut, et traitera et transformera les données en une chaîne de requête. Nous ne voulons pas faire cela, donc nous avons réglé ceci à faux. Nous mettons aussi contentType à faux pour vous assurer que les données parviennent au serveur comme nous l'espérons.
Et c'est tout. Maintenant, quand l'utilisateur charge la page, il voit ceci:
Et après avoir sélectionné les images, ils verront ceci:
Et les images ont été téléchargées:
Le téléchargement de fichiers via AJAX est très cool, et il est bon que ces nouvelles technologies prennent en charge cette fonctionnalité sans qu'il soit nécessaire de recourir à de longues hacks. Si vous avez des questions sur ce que nous avons fait ici, cliquez sur ces commentaires! Merci beaucoup pour la lecture!
Et si vous avez encore besoin d'aide pour résoudre ce problème ou tout autre problème de codage, contactez le support technique d'Envato Studio..
Nous avons créé un guide complet pour vous aider à apprendre le JavaScript, que vous soyez un développeur Web débutant ou que vous souhaitiez explorer des sujets plus avancés.
