Ein einfaches Knotenprojekt, das ein Upload für Multi-File-Drag-and-Drop-Upload implementiert, kann auf GitHub heruntergeladen werden. Sie können es zuerst herunterladen: https://github.com/johnharvy/uploadfiles/.
Schalte das heruntergeladene Zip -Format -Paket frei. Es wird empfohlen, Webstom zu verwenden, um das Projekt auszuführen und das Projekt über app.js. Wenn die Eingabeaufforderung lautet, dass die Ausführungsumgebung von Knoten.exe nicht gefunden werden kann, geben Sie bitte Ihren Knoten an. Das Express -Framework, das ich hier verwende, ist Version 3.21.2.
Führen Sie kurz vor, wie der Drag & Drop -Effekt erreicht wird.
Schauen wir uns zuerst den Code an:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="js/jquery.js"></script><script src="js/EventUtil.js"></script><title>uploadFile</title><style>#a1{width:100px;height:100px;background: #aaaaaaa; Text-Align: Mitte; Zeilenhöhe: 100px; Farbe: RGBA (81, 49, 202, 0,72); Margin: 150px auto;} </style> </head> <body> <div id = "a1"> zu diesem </div> <diviTBy = "out-input" </div> </div> </div> </</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</DIV). HandleEvent (Ereignis) {var info = "", output = document.getElementById ("Out-Input"), Dateien, i, len; EventUtil.PreventDefault (Ereignis); // Standardverhalten der Blockierung von Ereignissen var formdata = new FormData (); if (Ereignis.Type == "Drop") {files = event.datatransfer.files; i = 0; len = files.length; while (i <len) {info += Dateien [i] .name +"(" +Dateien [i]. +"bytes)<br/>";formData.append("file"+i,files[i]);i++;}output.innerHTML = info;$.ajax({type:"post",url:"/uploadFile",data:formData,async: false,cache: false,contentType: false,processData: false, //Here we specify the operation to not read the String standardmäßig zum Hochladen von Datenerfolg: Funktion (rs) {console.log (rs);}, Fehler: Funktion (r) {alert ("Ein Datei -Upload -Fehler!");}});}} EventUtil.AddHandler (A1, "Dragover", HandleEvent). "Drop", HandleEvent); </script> </body> </html>Der HTML -Inhalt ist sehr einfach, man zeigt den zulässigen Drag -Bereich an, und man wird verwendet, um den Inhalt der hochgeladenen Datei anzuzeigen.
JS Teil:
Hier habe ich ein EventUtil -Schnittstellenobjekt vorbereitet, das Sie auch als kleine Bibliothek für den Umgang mit Ereignissen betrachten können. Seine Funktion besteht darin, verschiedene Methoden zum Binden der gleichen Ereignisse in jedem Browser zu verkapulieren. Um die gemeinsamen Ereignisbindungsmethoden jedes Browsers zu implementieren, wird es mit dem EventUtil -Objekt einheitlich implementiert. Sie können sich einfach den Implementierungscode ansehen, der sehr einfach ist.
Wenn der Browser drei Ereignisse von Drag erkennt, "Drager", "Dragover" und das Standardverhalten "Drag" werden blockiert, und unsere benutzerdefinierten Ereignisse werden ausgeführt, wenn die Situation "Drag" "Drag" ist.
Da wir eine Datei hochladen, verwenden wir hier die FormData -Instanz. Fügen Sie dem Objekt über append () eine Datei hinzu, um eine Warteschlangendatei zu werden. Nach dem Hochladen auf den Server wird es in Attributobjekten in der Warteschlangenreihenfolge analysiert. Im Fall werden die im Event gespeicherten Dateien über "Event.Datatransfer.files" abgerufen.
Eine andere Sache, die hier zu beachten ist, ist, dass die AJAX -Methode von JQuery beim Hochladen von Dateiobjekten ProcessData auf False konfigurieren muss, was bedeutet, dass die Standard -Lesezeichenfolge nicht verwendet wird. Der Grund dafür ist, dass standardmäßig die Daten, die über die Datenoption übergeben wurden, ein Objekt ist (technisch gesehen, solange es sich nicht um eine Zeichenfolge handelt), wird sie verarbeitet und in eine Abfrage-Zeichenfolge konvertiert, um mit dem Standard-Inhaltstyp "Anwendung/x-www-form-urlencodiert" übereinzustimmen. Wenn Sie DOM -Baum -Informationen oder andere Informationen senden möchten, die Sie nicht konvertieren möchten, müssen Sie sie auf false festlegen.
Nachdem das Datei -Upload erfolgreich hochgeladen wurde, druckt die Konsole die Informationen "{infor:" Erfolg "}".
Zu diesem Zeitpunkt endet der Front-End-Teil. Schauen wir uns den Code auf der Seite node.js an.
Die Dateistruktur lautet wie folgt:
Schauen wir uns zunächst den Inhalt in der Route an - app.js:
var express = required ('express'); var routes = require ('./routes'); var user = required ('. 'Jade'); App.Use (Express.Favicon ()); App.Use (Express.Logger ('Dev'); App.Use (Express.json ()); App.Use (Express.urlencoded ()) ; app.use (Express.Methodoverride ()); app.use (app.router); App.use (Express.static (Path.Join (__ DirName))); exports.app = App; var UploadAction = Request ("./ Action/FileUpload"); // Routing -Ereignis anhören uploadAction.Uploadtest.UploadFile (); // Datei hochladen upload nurf ('Development' == App.get ('env') {App.USE (express.errorHandler ();} App.Get ('/uswes user.list);Es gibt verschiedene Unterschiede zu den ersten App.Js. Ich habe das App -Objekt exportiert, um es in FileUpload.js wiederzuverwenden, und dann das DateiEUpload.js -Modul vorgestellt und das Uploadtest -Objekt erhalten, das alle Methoden des Moduls über dieses Schnittstellenobjekt speichert und die UploadFile -Methode aufgerufen hat.
OK, schauen wir uns endlich die Datei für FileUpload.js an:
var multipart = require('connect-multiparty');var App=require("../app");var path = require('path');var fs=require("fs");var app=App.app;var uploadTest={};function uploadFile(){app.post("/uploadFile", multipart(),function(req,res) {var i=0;while(i != null) {if (req.files ["Datei"+i]) Upload (i); else {i = null; Path.Basename (req.files ["Datei" + Index] .Path); // Pfadschnittstelle kann den Pfad und den Dateinamen der Datei angeben. fs.createadStream (req.files ["Datei"+Index] .Path) .pipe (fs.createwritestream (targetPath));}});} uploadTest.UploadFile = UploadFile; exports.UploadTest = UploadTest;NodeJs sind immer sehr einfach und kraftvoll und sehr kreativ, weshalb ich es mag. Wir sehen, dass es hier tatsächlich nur sehr wenige Schlüsselcodes gibt. Ich werde kurz den logischen Prozess der Implementierung des Datei -Uploads vorstellen:
• Ermitteln Sie den Dateinamen der hochgeladenen Datei
• Legen Sie den Speicherort und den Dateinamen des Dateispeichers ein
• Lesen Sie den Inhaltsstream der Datei und erstellen Sie eine neue Datei, um den Inhaltsstream zu schreiben
Um mehrere Dateien hochzuladen, habe ich auch einige übereinstimmende Vorgänge durchgeführt, die sehr intuitiv und nicht schwer zu verstehen sind.
Nachdem die Datei erfolgreich hochgeladen wurde, wird sie unter der UploadFiles -Datei unter der öffentlichen Datei angezeigt.
Die in der Datei verwendeten Module werden in package.json aufgezeichnet. Sie können über den Befehl "NPM Installation" installiert werden, indem sie die gleichzeitige Ebene von Paket.json eingeben. Wenn Sie die auf GitHub heruntergeladenen Projektdateien direkt ausführen, müssen Sie sie nicht mehr installieren.
Das obige ist die Implementierungsmethode zum Kombinieren von NodeJs und HTML5, um mehrere Dateien auf den Server hochzuladen. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!