1. Préface
Le téléchargement de fichiers est une fonction relativement courante. La méthode traditionnelle de téléchargement est plus gênante. Vous devez d'abord cliquer sur le bouton Télécharger, puis trouver le chemin d'accès au fichier, puis le télécharger. Il apporte de grands problèmes à l'expérience utilisateur. HTML5 commence à prendre en charge le glisser-déposer et à supprimer l'API requis pour le téléchargement. Nodejs est également une technologie qui est devenue de plus en plus populaire récemment. C'est aussi la première fois que je m'implique dans NodeJS. Dans le développement de NodeJS, l'un des cadres de développement les plus couramment utilisés est l'exples, qui est un cadre similaire au modèle MVC. Combiné avec HTML5 et NodeJS Express, la fonction du téléchargement de glisser-déposer est réalisée.
2. Publization des connaissances de base
1. Connaissance de base des nodejs
Pour le dire simplement, NodeJS est une plate-forme de développement qui permet à JS d'exécuter du côté serveur. Nodejs se développe très rapidement et de nombreuses entreprises nationales ont également commencé à l'utiliser, comme Taobao. Les plates-formes de développement d'applications Web traditionnelles reposent sur le multi-threading pour obtenir des réponses de demande à haut contrat. NodeJS adopte un modèle d'IO asynchrone à thread unique et axé sur les événements, qui apporte d'énormes améliorations de performances aux NodeJS. C'est également la plus grande caractéristique de NodeJS. Dans NodeJS, toutes les opérations IO sont effectuées par rappel. Lorsque NodeJS exécute les opérations IO, il poussera la demande IO dans une file d'attente d'événements, attendez que le programme le traite, puis appellera la fonction de rappel pour renvoyer le résultat.
Par exemple, lors de l'interrogation de la base de données, l'opération est la suivante:
mysql.Query ("SELECT * FROM MYTABLE", fonction (res) {callback (res);});Dans le code ci-dessus, lorsque NodeJS exécutera l'instruction ci-dessus, il n'attendra pas que la base de données renvoie le résultat, mais continuera d'exécuter l'instruction suivante. Une fois que la base de données obtient des données, elle sera envoyée à la file d'attente de boucle d'événements. La chose de rappel ne sera exécutée qu'après que le thread entre dans la file d'attente de boucle d'événement.
J'en ai lu plus sur Nodejs pendant deux jours et je ne sais pas grand-chose. Pour en savoir plus, vous pouvez rechercher sur Internet.
Connaissances sur le début de Nodejs http://www.nodebeginner.org/index-zh-cn.html //www.vevb.com/article/48755.htm
2. Connaissance de base de l'express
NodeJS est une communauté open source relativement active avec un grand nombre de bibliothèques de développement tierces, parmi lesquelles Express est l'un des cadres les plus étendus et les plus couramment utilisés. C'est également le cadre officiel recommandé par NodeJS. En plus de l'encapsulation des opérations HTTP courantes, il met également en œuvre le contrôle de routage, la prise en charge de la résolution du modèle, les tentatives dynamiques, la réponse de l'utilisateur, etc. Mais ce n'est pas non plus un cadre omnipotent. La plupart des fonctions sont l'encapsulation de HTTP, ce n'est qu'un cadre léger. De nombreuses fonctions doivent également être intégrées dans des bibliothèques tierces et implémentées.
Exress prend en charge les fonctions de téléchargement très pratiques. Après la demande de téléchargement de fichiers, Express recevra le fichier et stockera le fichier dans un répertoire temporaire. Ensuite, dans la méthode de routage, nous devons simplement copier le fichier du répertoire temporaire au dossier que nous voulons stocker le téléchargement de l'utilisateur. Dans la pièce de téléchargement de fichiers, l'implémentation côté serveur est basée sur la fonction express.
3. API HTML5 DRAGINE et Téléchargez
HTML5 fournit de nombreuses nouvelles fonctionnalités, les événements de glisser et le téléchargement de fichiers sont l'une des nouvelles fonctionnalités. En raison de l'espace limité, la mise en œuvre du code téléchargé à glisser sera mise en évidence plus tard. Je ne répertorierai pas l'API Drag Téléchargé fourni par HTML5 un par un. Si vous êtes intéressé, veuillez vous référer à: http://w3school.com.cn/html5/html5_ref_eventattributes.asp#mouse_events //www.vevb.com/html5/85977.html
3. Faites glisser et téléchargez pour atteindre
1. Implémentation du code
Examinons d'abord le répertoire de fichiers du frontal JS:
dans:
uploader.js implémente principalement l'encapsulation de la fonction de téléchargement prise en charge par HTML5.
uploaderqueue.js implémente principalement la gestion des files d'attente de fichiers de téléchargement et des objets de téléchargement de fichiers, téléchargeant des fichiers dans la file d'attente de fichiers sur le serveur.
L'entrée principale du téléchargement de fichiers uplollerapp.js, qui implémente principalement la fenêtre de téléchargement pour écouter les événements glisser et pousse les fichiers glissés dans la file d'attente de fichiers de téléchargement, et démarre le programme de téléchargement de fichiers.
Ce qui suit est une explication simple du code central (nécessaire). Tous les codes peuvent être téléchargés ici: Fileuploader
Tout d'abord, encapsulez simplement uploader.js pour le téléchargement des fichiers fournis par HTML5
Fonction Uploader (URL, données, fichiers) {this._files = fichiers; this._data = data; this._url = url; this._xhr = null; this.onloadStart = {}; this.onloadEnd = {}; this.onprogress = {}; this.onerror = {}; this.ontimeout = {}; this.callback = {}; // rappel une fois la demande terminée_self = this; } uploader.prototype = {init: function () {if (! isValid ()) {throw e; } this._xhr = new xmlHttpRequest (); this._bindevents (); }, send: function () {if (this._xhr == null) {this.init (); } var formdata = this._createFormData (); this._xhr.open ('post', this._url, true); this._xhr.send (formdata); }, _bindevents: function () {_self = this; this._xhr.upload.loadStart = function (e) {evalFunction (_self.onloadStart, e); } this._xhr.upload.onload = function (e) {evalFunction (_elf.onload, e); }; this._xhr.upload.onLoadEnd = fonction (e) {evalFunction (_elf.onloadEnd, e); } this._xhr.upload.onprogress = function (e) {evalFunction (_elf.onprogress, e); }; this._xhr.upload.onError = fonction (e) {evalFunction (_self.onerror, e); }; this._xhr.upload.ontimeout = function (e) {evalFunction (_elf.ontimeout, e); } this._xhr.onreadystatechange = function () {if (_self._xhr.readystate == 4) {if (typeof _self.callback === 'fonction') {var status = _self._xhr.status; var data = _self._xhr.ResponSeText; _self.callback (statut, données); }}}}}, _CreateFormData: function () {var formData = new formData (); this._adddatatoformData (formdata); this._AddFileToFormData (formdata); return formData; }, _adddatatoFormData: function (formdata) {if (this._data) {for (var item dans this._data) {formData.append (item, this._data [item]); }}},) formdata.append ('file [' + i + ']', this._files [i]); }}}}}; Voir Codevar uploaderFactory = {send: function (URL, data, fichiers, callback) {var insuploader = new uploader (url, data, fichiers); insuploader.callback = function (status, resdata) {if (typeof callback === 'function') {callback (status, resdata); }} insuploader.send (); return insuploader; }};L'objet de téléchargeur résume principalement l'API native fournie par HTML5. UploaderFactory fournit une interface simple, qui peut être effectuée comme la méthode AJAX de JQuery, les appels de téléchargement de fichiers. La prise en charge du téléchargement de fichiers fournie dans HTML5 consiste à étendre certaines propriétés et méthodes basées sur le XMLHTTPRequest d'origine, et fournir des objets FormData pour prendre en charge les opérations de téléchargement de fichiers.
La file d'attente de téléchargement de fichiers (uploaderqueue.js) est également un objet relativement important. Il comprend deux objets, l'un est la file d'attente, l'objet de file d'attente de fichiers, qui est principalement responsable de la gestion de l'ajout, de la suppression, de la modification et de la requête des files d'attente de fichiers. L'autre objet est UploadEngine, un moteur de téléchargement de fichiers. Sa fonction est principalement responsable de la suppression des objets de fichier à partir de la file d'attente de fichiers, d'appeler l'objet Uploader pour télécharger des fichiers, puis de mettre à jour l'état du fichier dans la file d'attente de fichiers. La file d'attente et le téléchargement sont des objets singleton.
Tout d'abord, jetons un coup d'œil à l'objet de file d'attente de fichiers:
(fonction (upladerqueue) {var status = {ready: 0, uploading: 1, complet: 2} var _self = null; var instance = null; function file d'attente () {this._datas = []; this._cursize = 0; // length actuel_self = this;} queue.prototype = {add: function (data) {var key = news). this._datas.push ({key: key, data: data: status.ready}); {var index = this._getIndexykey (key); this._getIndexbykey (key); }} return -1; }, getDatabyIndex: function (index) {if (index <0) {return null; } return this._datas [index]; }, _getIndexBykey: function (key) {for (var i = 0; i <this._datas.length; i ++) {if (this._datas [i] .key == key) {return i; }} return -1; }}; fonction getInStace () {if (instance === null) {instance = new queue (); retour d'instance; } else {return instance; }} upladerqueue.queue = getInstance (); upladerqueue.uploadStatus = status;}) (window.uploadERQueue);La file d'attente de fichiers de téléchargement utilise un tableau pour gérer les informations de chaque objet de fichier. Chaque objet de fichier a trois attributs: la clé, les données et l'état. Cet objet est principalement responsable des fonctions d'ajout, de suppression, de mise à jour et de recherche d'objets de fichier.
Un autre objet plus important dans la file d'attente de fichiers de téléchargement est l'objet de téléchargement du moteur (UploadEngine.js)
(fonction (upladerqueue) {var instance = null; var _self; function uploadEngine () {this._url = null; this._curuploadingKey = -1; // Flags this.uploadStatusChanged = {}; this.uploadtelemprogress = {}; _ self = this;} uploadengine. {this._url = url;}, fonction: fonction () {if (this._curuploadingKey === -1 && this._url) {this._startupload (); this._uploaditem (index);} else {this._curupLoadingKey = -1; Null, Data.Files, Fonction (Status, Data) {_Self._CompleTedUpLoDiTem.Call (_Self, Status, Data); _self.uploaditeMProgress (_self._curuploadingKey, e); }}, _readyuploadItem: function (index) {this._curuploadingKey = upladerqueue.queue.getDatabyIndex (index) .key; if (typeof this.uploadstatuschanged === 'function') {this.uploadStatusChanged (this._curuploadingKey, upladerqueue.uploadstatus.uploading); } upladerqueue.queue.setItemStatus (this._curuploadingKey, upladerqueue.uploadstatus.uploading); }, _CompleTeduploadItem: function (status, data) {if (typeof this.uploadStatusChanged === 'function') {this.uploadsatuschanged (this._curuploadingKey, upladerqueue.uploadsatus...capletele); } upladerqueue.queue.setItemStatus (this._curuploadingKey, upladerqueue.uploadstatus.compte); this._startupload (); }}; fonction getInStace () {if (instance === null) {instance = new uploadEngine (); } return instance; } upladerqueue.engine = getInStace ();}) (window.uploadErqueue);Cet objet est relativement simple et fournit principalement une méthode d'exécution et seturl, qui est utilisée pour démarrer le moteur de téléchargement et définir le chemin de téléchargement. La méthode récursive est utilisée en interne pour télécharger toutes les méthodes dans la file d'attente de fichiers sur le serveur. Utilisez Téléchargement de téléchargement pour informer la progression des téléchargements externes et utilisez le uploadStatusChanged pour notifier l'état de téléchargement de fichiers pour mettre à jour l'interface utilisateur.
uploderApp.js comprend principalement trois objets, l'un est un simple objet jQuery (app $) similaire à jQuery. Principalement utilisé pour les événements de liaison. L'un est l'objet UploadERArea, qui est la zone de fenêtre qui est glisser et téléchargée, et l'autre est l'objet d'entrée, l'objet Uploadermain. Il est principalement utilisé pour initialiser les objets, fournissant une méthode init à l'extérieur pour initialiser l'ensemble de l'objet.
Pour en savoir plus sur le code sur les objets APP $ et uploadoirarea, veuillez télécharger le code source. Ce qui suit n'est qu'une brève explication de l'objet Uploadermain.
(fonction (app) {var _self; fonction uploaderMain (id) {this._id = id; this._area = null; this.uploaders = []; this._url = 'file / uploader';} uploadermain.prototype = {init: function () {_self = this._initatea (); this._initqueUeEng ();}, this._initatea (); _initqueueEng: function () {uploadERQUeue.Engine.setUrl (this._url); uplowerqueue.uploadstatus.compte) {_self._area.comptemitem (key); 100)); this._area.canceLitem = function (key) {uplowerQueue.Queue.Remove (key); }}}; app.main = uploadermain; }) (window.uploaderApp);L'objet UploaderMain est équivalent à l'intermédiaire entre chaque objet, principalement pour faire la fonction d'initialisation de l'objet et s'appeler entre les objets. Faites collaborer chaque objet entre eux pour remplir les fonctions de l'ensemble du module. Fournissez une méthode init pour initialiser l'ensemble du programme. Dans la page HTML, il suffit de besoin du code suivant:
<script type = "text / javascript"> var main = new uploderApp.main ('conteneur'); main.init (); </cript>Le code ci-dessus est de créer un objet d'entrée, puis d'utiliser la méthode init pour démarrer l'intégralité du programme.
Ce qui précède est une explication simple des principales méthodes de JS frontal. Si vous voulez en savoir plus, veuillez télécharger le code source. Jetons un coup d'œil au code principal de l'implémentation côté JS (NodeJS).
Dans les bases d'Express, nous avons déjà dit que la fonction de téléchargement de fichiers a été complètement encapsulée dans Express. Lors du routage vers l'action, le fichier n'a été téléchargé que si le fichier est téléchargé dans un répertoire temporaire. Nous pouvons configurer ce répertoire temporaire dans app.js. La méthode de configuration est la suivante:
app.use (express.bodyParser ({uploaddir: __ dirname + '/ public / temp'}));De cette façon, une fois le fichier téléchargé, le fichier est stocké dans le répertoire / public / temp et le nom du fichier est également obtenu au hasard par Express via certains algorithmes. Dans l'action que nous écrivons, nous devons seulement déplacer les fichiers dans le répertoire temporaire vers le répertoire où les fichiers sont stockés sur le serveur, puis supprimer les fichiers dans le répertoire temporaire. Le code spécifique est le suivant:
Fonction Uploader (req, res) {if (req.files! = 'undefened') {console.dir (req.files); utils.mkdir (). alors (fonction (path) {uploadFile (req, res, path, 0);}); }} fonction uploadfile (req, res, path, index) {var temppath = req.files.file [index] .path; var name = req.files.file [index] .name; if (temppath) {var rename = promest.Denodeify (fs.rename); renommer (temppath, path + name) .then (function () {var unlink = promest.Denodeif uploadFile (req, res, chemin, index + 1);}}); }}2. Réalisez l'effet
4. Obtenez le code
Adresse de téléchargement de code: //www.vevb.com/jiaoben/202117.html