1. Vorwort
Das Datei -Upload ist eine relativ häufige Funktion. Die traditionelle Hochladenmethode ist problematischer. Sie müssen zuerst auf die Schaltfläche "Upload" klicken, dann den Pfad zur Datei suchen und dann hochladen. Es bringt große Probleme in die Benutzererfahrung. HTML5 stützt den Drag and fallen die erforderliche API zum Hochladen. NodeJS ist auch eine Technologie, die in letzter Zeit immer beliebter geworden ist. Dies ist auch mein erstes Mal, dass ich mich auf NodeJS einlassen kann. In der NodeJS -Entwicklung ist ein der am häufigsten verwendeten Entwicklungsrahmen ein Expess, der ein Rahmen ist, das dem MVC -Muster ähnelt. In Kombination mit HTML5- und Nodejs Express wird die Funktion des Drag & Drop -Uploads realisiert.
2. Popularisierung von Grundkenntnissen
1. Grundkenntnisse von NodeJs
Einfach ausgedrückt ist NodeJS eine Entwicklungsplattform, mit der JS auf der Serverseite ausgeführt werden kann. NodeJS entwickelt sich sehr schnell und viele inländische Unternehmen haben es ebenfalls verwendet, wie Taobao. Herkömmliche Plattformen der Webanwendungsentwicklung basieren auf Multi-Threading, um hochkonfessionelle Anforderungsantworten zu erzielen. NodeJs nimmt ein einsthreades, asynchrones IO- und ereignisorientiertes Designmodell an, das NodeJs enorme Leistungsverbesserungen verleiht. Dies ist auch das größte Merkmal von NodeJs. In NodeJs werden alle IO -Operationen durch Rückrufe durchgeführt. Wenn NodeJS IO -Vorgänge ausführt, wird die IO -Anfrage an eine Ereigniswarteschlange weitergegeben, bis das Programm bearbeitet und dann die Rückruffunktion aufgerufen, um das Ergebnis zurückzugeben.
Wenn Sie beispielsweise die Datenbank abfragen, lautet der Vorgang wie folgt:
MySQL.Query ("aus myTable auswählen", Funktion (res) {callback (res);});Wenn NodeJS die obige Anweisung ausführt, kaumt es nicht, dass die Datenbank das Ergebnis zurückgibt, sondern die folgende Anweisung weiterhin ausführt. Nachdem die Datenbank Daten erhalten hat, wird sie an die Event -Loop -Warteschlange gesendet. Die Rückrufsache wird erst ausgeführt, nachdem der Thread in die Event Loop -Warteschlange eingetreten ist.
Ich habe zwei Tage lang mehr über NodeJs gelesen und weiß nicht viel. Um mehr zu erfahren, können Sie im Internet suchen.
Wissen über den Einstieg mit NodeJS http://www.nodeebglner.org/index-zh-cn.html //www.vevb.com/article/48755.htm
2. Grundkenntnisse von Express
NodeJS ist eine relativ aktive Open-Source-Community mit einer großen Anzahl von Entwicklungsbibliotheken von Drittanbietern, unter denen Express eines der umfangreichsten und am häufigsten verwendeten Frameworks ist. Es ist auch der offizielle von NodeJS empfohlene Framework. Zusätzlich zur Kapselung gemeinsamer HTTP -Operationen implementiert sie auch Routing -Steuerung, Unterstützung bei der Vorlagenauflösung, dynamische Versuche, Benutzerantwort usw., aber es ist auch kein allmächtiges Framework. Die meisten Funktionen sind die Einkapselung von HTTP, es ist nur ein leichtes Gerüst. Viele Funktionen müssen auch in Bibliotheken von Drittanbietern integriert und implementiert werden.
Exress unterstützt sehr bequeme Upload -Funktionen. Nach der Datei -Upload -Anforderung empfängt Express die Datei und speichert die Datei in einem temporären Verzeichnis. In der Routing -Methode müssen wir dann nur die Datei aus dem temporären Verzeichnis in den Ordner kopieren, den wir den Benutzer -Upload speichern möchten. Im Datei-Upload-Teil basiert die serverseitige Implementierung auf der Express-Funktion.
3. HTML5 Drag & Upload API
HTML5 bietet viele neue Funktionen, Dragereignisse und Datei -Upload sind eine der neuen Funktionen. Aufgrund des begrenzten Platzes wird die Implementierung von Drag-up-hochgeladenen Code später hervorgehoben. Ich werde die von HTML5 bereitgestellte API -API von HTML5 nacheinander nicht auflisten. Wenn Sie interessiert sind, finden Sie unter: http://w3school.com.cn/html5/html5_ref_eventattributes.asp#mouse_events //www.vevb.com/html5/85977.html
3. Ziehen und hochladen, um sie zu erreichen
1. Code -Implementierung
Schauen wir uns zunächst das Dateiverzeichnis des Front-End-JS an:
In:
Uploader.js implementiert hauptsächlich die Einkapselung der von HTML5 unterstützten Upload -Funktion.
UploaderQueue.js implementiert hauptsächlich die Verwaltung des Hochladens von Datei -Warteschlangen und Datei -Upload -Objekten, wodurch Dateien in die Dateiwarteschlange auf den Server hochgeladen werden.
Der Haupteingang zum UploaderApp.js -Datei -Upload, das das Upload -Fenster hauptsächlich im Hochladen im Ziehen von Ereignissen implementiert und die gezogenen Dateien in die Upload -Dateiwarteschlange drückt und das Datei -Upload -Programm startet.
Das Folgende ist eine einfache Erklärung des Kerncode (benötigt). Alle Codes können hier heruntergeladen werden: FileUploader
Enkapitülen Sie zunächst einfach Uploader.js zum Hochladen von Dateien, die von HTML5 bereitgestellt wurden
Funktion Uploader (URL, Daten, Dateien) {this._files = Dateien; this._data = Daten; this._url = url; this._xhr = null; this.onloadStart = {}; this.onloadend = {}; this.onprogress = {}; this.onError = {}; this.ontimeout = {}; this.callback = {}; // Rückruf nach Abschluss der Anforderung. } uploader.prototype = {init: function () {if (! isvalid ()) {throw e; } this._xhr = new XmlhttpRequest (); this._bindvents (); }, 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 = Funktion (e) {evalfunction (_self.onloadStart, e); } this._xhr.Upload.onload = Funktion (e) {evalfunction (_self.onload, e); }; this._xhr.Upload.onloadend = Funktion (e) {evalfunction (_self.onloadend, e); } this._xhr.Upload.onprogress = Funktion (e) {evalfunction (_self.onprogress, e); }; this._xhr.Upload.onError = Funktion (e) {evalfunction (_self.onError, e); }; this._xhr.Upload.ontimeout = Funktion (e) {evalfunction (_self.ontimeout, e); } this._xhr.onReadyStatechange = function () {if (_self._xhr.readystate == 4) {if (typeof _self.callback === 'Funktion') {var status = _self._xhr.status; var data = _self._xhr.responsetext; _self.callback (Status, Daten); }}}}}, _createFormData: function () {var formData = new FormData (); this._adddatatOrmdata (FormData); this._addfiletoformData (FormData); Rückgabe FormData; }, _adddatatOrformData: function (formData) {if (this._data) {for (var item in this._data) {formData.append (item._data [item]); }}}, _addFiletOformData: function (formData) {if (this._files) {for (var i = 0; i <this._files.length; i ++) {var file = this._files [i]; FormData.Append ('Datei [' + i + ']', this._files [i]); }}}}}; Ansicht codevar uploaderFactory = {send: function (url, data, filen, radback) {var InSuPloader = neuer Uploader (URL, Daten, Dateien); Insuploader.callback = Funktion (Status, Resdata) {if (typeof callback === 'function') {callback (Status, Resdata); }} Insuploader.send (); Insuploader zurückgeben; }};Das Uploader -Objekt fasst hauptsächlich die von HTML5 bereitgestellte native API zusammen. UploaderFactory bietet eine einfache Schnittstelle, die wie die AJAX -Methode von JQuery und Datei -Upload -Aufrufe erfolgen kann. Die Unterstützung des in HTML5 bereitgestellten Datei -Uploads besteht darin, einige Eigenschaften und Methoden basierend auf dem ursprünglichen XMLHTTPrequest zu erweitern und FormData -Objekte bereitzustellen, um Dateien -Upload -Vorgänge zu unterstützen.
Die Datei -Upload -Warteschlange (Uploaderqueue.js) ist ebenfalls ein relativ wichtiges Objekt. Es enthält zwei Objekte, eines ist Warteschlangenwarteschlangenobjekt, das hauptsächlich für die Verwaltung der Addition, Löschung, Änderung und Abfrage von Dateiwarteschlangen verantwortlich ist. Das andere Objekt ist UploadEngine, eine Datei -Upload -Engine. Seine Funktion ist hauptsächlich dafür verantwortlich, Dateiobjekte aus der Dateiwarteschlange zu entfernen, das Uploader -Objekt aufzurufen, um Dateien hochzuladen und dann den Dateistatus in der Dateiwarteschlange zu aktualisieren. Warteschlange und UploadEngine sind Singleton -Objekte.
Schauen wir uns zunächst das Datei -Warteschlangenobjekt an:
(Funktion (UpladerQueue) {var status = {ready: 0, hochladen: 1, vollständig: 2} var _self = null; var instance = null; Funktion queue () {this._datas = []; this._cursize = 0; // aktuelle Länge_Self. this._datas.push ({key: data: status: status.ready}) {var index = this._getIndexByKey (Schlüssel); this._getIndexByKey (Schlüssel); }} return -1; }, getDatabyIndex: function (index) {if (index <0) {return null; } return this._datas [index]; }, _getIndexByKey: Funktion (Schlüssel) {für (var i = 0; i <this._datas.length; i ++) {if (this._datas [i] .Key == Key) {return i; }} return -1; }}; Funktion getInStace () {if (instance === null) {instance = new Queue (); Rückkehrinstanz; } else {return Instance; }} Upladerqueue.queue = getInstance (); upladerqueue.UploadStatus = Status;}) (Fenster.UploaderQueue);Die Upload -Dateiwarteschlange verwaltet ein Array, um die Informationen jedes Dateiobjekts zu verwalten. Jedes Dateiobjekt hat drei Attribute: Schlüssel, Daten und Status. Dieses Objekt ist hauptsächlich für die Funktionen des Hinzufügens, Löschens, Aktualisierens und Durchsuchen von Dateiobjekten verantwortlich.
Ein weiteres wichtigsteres Objekt in der Upload -Dateiwarteschlange ist das Upload Engine -Objekt (UploadEngine.js)
(Funktion (UpladerQueue) {var instance = null; var _self; Funktion uploadEngine () {this._url = null; this._curuploadingKey = -1; // fackelt diese. (url) {this._url = url; {this._Uploadem (index); UploaderFactory.send (this._url, null, data.files, function (status, data) {_self._completedUploaditem.call (_self); _self.UploadItemProgress (_self._curuploadingKey, e); }}, _ReadyUploadItem: function (index) {this._curuploadingkey = upladerqueue.queue.getDatabyIndex (Index) .Key; if (typeof this } upladerqueue.queue.setItemStatus (this._curuploadingKey, Upladerqueue.Uploadstatus.Uploading); }, _completedUploadItem: function (Status, Daten) {if (typeof this } upladerqueue.queue.setItemStatus (this._curuPloadingKey, Upladerqueue.Uploadstatus.complete); this._StartUpload (); }}; function getInStace () {if (instance === null) {instance = new UploadEngine (); } return Instance; } upladerqueue.engine = getInStace ();}) (Fenster.UploaderQueue);Dieses Objekt ist relativ einfach und bietet hauptsächlich eine Auslauf- und Seturl -Methode, mit der der Upload -Engine gestartet und den Upload -Pfad eingerichtet wird. Die rekursive Methode wird intern verwendet, um alle Methoden in der Dateiwarteschlange auf den Server hochzuladen. Verwenden Sie UploadItemProgress, um den Fortschritt externer Uploads zu benachrichtigen, und verwenden Sie UploadStatuSchanged, um den Datei -Upload -Status zur Aktualisierung der Benutzeroberfläche zu benachrichtigen.
Uploaderapp.js enthält hauptsächlich drei Objekte, eines ist ein einfaches JQuery -Objekt (App $) ähnlich wie JQuery. Hauptsächlich für Bindungsereignisse verwendet. Eines ist das Uploaderarea -Objekt, das der Fensterbereich ist, der gezogen und hochgeladen wird, und das andere ist das Eingangsobjekt, das Uploadmain -Objekt. Es wird hauptsächlich zur Initialisierung von Objekten verwendet und bietet eine Init -Methode nach außen, um das gesamte Objekt zu initialisieren.
Um den Code über App $ und Uploaderarea -Objekte zu erfahren, laden Sie bitte den Quellcode herunter. Das Folgende ist nur eine kurze Erklärung des Uploadmain -Objekts.
(Funktion (app) {var _self; Funktion uploadMain (id) {this._id = id; this._area = null; this.Uploaders = []; this._url = 'file/uploader';} uploadmain.Prototype = {init: function () {_inithy; _initqueueEng: function () {uploaderqueue.engine.seturl (this._url); uploaderqueue.Uploadstatus.com plete) {_self._area.com pleteem (key); Math.Round (Fortschritt * 100)); Rückgabeschlüssel; }}}; app.main = uploadmain; }) (window.UploaderApp);Das Uploadmain -Objekt entspricht dem Vermittler zwischen jedem Objekt, hauptsächlich, um die Initialisierungsfunktion des Objekts zu erfüllen und sich zwischen Objekten gegenseitig aufzurufen. Lassen Sie jedes Objekt miteinander zusammenarbeiten, um die Funktionen des gesamten Moduls zu vervollständigen. Geben Sie eine Init -Methode zur Initialisierung des gesamten Programms an. Benötigen auf der HTML -Seite nur den folgenden Code:
<script type = "text/javaScript"> var main = new UploaderApp.main ('Container'); main.init (); </script>Der obige Code soll ein Eintragsobjekt erstellen und dann die Init -Methode verwenden, um das gesamte Programm zu starten.
Das obige ist eine einfache Erklärung der Hauptmethoden von Front-End-JS. Wenn Sie mehr wissen möchten, laden Sie bitte den Quellcode herunter. Werfen wir einen Blick auf den Hauptcode der Backend JS (NODEJS) -Seiten -Implementierung.
In den Grundlagen von Express haben wir bereits gesagt, dass die Datei -Upload -Funktion in Express vollständig verkörpert wurde. Beim Routing an Aktion wurde die Datei nur hochgeladen, wenn die Datei in ein temporäres Verzeichnis hochgeladen wird. Wir können dieses temporäre Verzeichnis in app.js. Die Konfigurationsmethode lautet wie folgt:
app.use (express.bodyparser ({uploadDir: __ DirName+'/public/temp'}));Auf diese Weise wird nach dem Hochladen der Datei die Datei im Verzeichnis /public /temp gespeichert und der Dateiname auch zufällig durch Express über bestimmte Algorithmen erhalten. In der von uns geschriebenen Aktion müssen wir die Dateien nur im temporären Verzeichnis in das Verzeichnis verschieben, in dem die Dateien auf dem Server gespeichert werden, und dann die Dateien im temporären Verzeichnis löschen. Der spezifische Code lautet wie folgt:
Funktion uploader (req, res) {if (req.files! = 'undifed') {console.dir (req.files); utils.mkdir (). Dann (Funktion (path) {uploadFile (req, res, path, 0);}); }} Funktion uploadFile (Req, Res, Path, Index) {var temppath = req.files.file [index] .Path; var name = req.files.file [index] .name; if (temppath) {var umbename = denodeif (fs.rename); umbenennen (temppath, path + name) .then (function () {var unlink = vortrink.Denodeif (fs.unlink); unlink (temppath);}). Dann (function () {if (index == req.file.file.Length - 1) {var res = {{code: 1, des: Des: Des: Des: Des. UploadFile (Req, Res, Path, Index + 1); }}2. Erkennen Sie den Effekt
4. Holen Sie sich den Code
Code -Download -Adresse: //www.vevb.com/jiaoben/202117.html