Un projet de nœud simple qui implémente le téléchargement de glisser-déposer multi-fichiers peut être téléchargé sur GitHub. Vous pouvez le télécharger d'abord: https://github.com/johnharvy/uploadfiles/.
Déverrouillez le package de format zip téléchargé. Il est recommandé d'utiliser WebStom pour exécuter le projet et démarrer le projet via app.js. Si l'invite est que l'environnement d'exécution Node.exe ne peut être trouvé, veuillez spécifier votre emplacement d'installation Node.exe. Le cadre express que j'utilise ici est la version 3.21.2.
Introrions brièvement la façon dont l'effet de traînée et de chute est réalisé.
Regardons d'abord le code:
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <script src = "js / jQuery.js"> </script> <script src = "js / eventUtil.js"> </cript> <Titre> uploadfile </tape> <style> # a1 {wadth: 100px #aaaaaa; text-align: Centre; Line-Height: 100px; couleur: rgba (81, 49, 202, 0,72); margin: 150px auto;} </ style> </ad> <body> <div id = "a1"> glisser vers ce </v> <div id = "out-input"> </v> </vrict> a1 = document.getElementById ("A1"); fonction HandleEvent (événement) {var info = "", output = Document.GetElementById ("Out-Input"), fichiers, i, len; eventUtil.preventDefault (événement); // Comportement par défaut du blocage des événements var formdata = new formData (); if (event.type == "drop") {files = event.datatransfer.files; i = 0; len = files.length; while (i <len) {info + = files + "Bytes) <br/>"; formdata.append ("file" + i, fichiers [i]); i ++;} output.innerhtml = info; $. string by default for uploading data success:function(rs){console.log(rs);},error:function(r){alert("A file upload error!");}});}}EventUtil.addHandler(a1, "dragover", handleEvent);EventUtil.addHandler(a1, "drop", handleEvent);EventUtil.addHandler(a1, "Drop", HandleEvent); </cript> </ body> </html>Le contenu HTML est très simple, on affiche la plage de glisser autorisée et une est utilisée pour afficher le contenu du fichier téléchargé.
JS Partie:
Ici, j'ai préparé un objet d'interface EventUtil, que vous pouvez également considérer comme une petite bibliothèque pour gérer les événements. Sa fonction est d'encapsuler différentes méthodes pour lier les mêmes événements dans chaque navigateur. Afin d'implémenter les méthodes de liaison des événements communs de chaque navigateur, il est uniformément implémenté à l'aide de l'objet EventUtil. Vous pouvez simplement consulter son code d'implémentation, ce qui est très simple.
Lorsque le navigateur détecte trois événements de glisser, "drager", "dragover" et "glisser" Le comportement par défaut sera bloqué, et nos événements personnalisés seront exécutés lorsque la situation "drag" est "glisser".
Parce que nous téléchargeons un fichier, nous utilisons l'instance FormData ici. Ajoutez un fichier à l'objet via A SPEND () pour devenir un fichier de file d'attente. Après le téléchargement sur le serveur, il sera analysé dans des objets d'attribut dans l'ordre de la file d'attente. Dans l'événement, les fichiers stockés dans l'événement sont récupérés via "event.datatransfer.files".
Une autre chose à noter ici est que la méthode AJAX de JQuery doit configurer ProcessData en false lors du téléchargement d'objets de fichier, ce qui signifie ne pas utiliser l'opération de chaîne de lecture par défaut. La raison en est que par défaut, si les données transmises par l'option de données sont un objet (techniquement parlant, tant qu'il ne s'agit pas d'une chaîne), il sera traité et converti en une chaîne de requête pour correspondre au type de contenu par défaut "Application / X-WWW-Form-Urlencoded". Si vous souhaitez envoyer des informations sur les arbres DOM ou d'autres informations que vous ne souhaitez pas convertir, vous devez la définir sur False.
Une fois le téléchargement de fichiers téléchargé avec succès, la console imprimera les informations "{Infor:" Success "}".
À ce stade, la partie frontale se termine. Jetons un coup d'œil au code du côté Node.js.
La structure des fichiers est la suivante:
Regardons d'abord le contenu de l'itinéraire - app.js:
var express = require ('express'); var routes = require ('./ routes'); var user = required ('./ routes / user'); var http = required ('http'); var path = require ('path'); var app = express (); // allviromentsApp.set ('port', process.env.port || 3000); app.set ('le moteur de vue', le moteur ', process.env.port || 3000); app.set (' 'visued moteur', le moteur ', process.env. 'jade'); app.use (express.favicon ()); app.use (express.logger ('dev')); app.use (express.json ()); app.use (express.urLencomed ()) ; app.use (express.methodoverride ()); app.use (app.router); app.use (express.static (path.join (__ dirname))); exports.app = app; var; uploadAction = require ("./ Action / Fileupload"); // Routing Event écouter uploadAction.uploadTest.uploadFile (); // File upload upload uniquef ('Development' == App.get ('Env')) {app.use (express.errrorHandler ());} App.get ('/ users', user.list); http.createServer (app) .Listen (app.get ('port'), function () {console.log ('Express Server écoutant sur port' + app.get ('port'));});Il existe plusieurs différences par rapport à l'application initiale.js. J'ai exporté l'objet APP pour le réutiliser dans fileupload.js, puis j'ai introduit le module Fileupload.js, et obtenu l'objet UploadTest qui enregistre toutes les méthodes du module via cet objet d'interface et appelé la méthode UploadFile.
Ok, regardons enfin le fichier fileupload.js:
var multipart = require ('connect-mulTiparty'); var app = required ("../ app"); var path = require ('path'); var fs = require ("fs"); var app = app.app; var uploadTest = {}; fonction uploadfile () {app.post ("/ uploadfile", multipart (), fonction (req, res) {var i = while (i! null) {if (req.files ["file" + i]) upload (i); else {i = null; res.json ({infor: "succès"}); return;} i ++;} // upload feled function upload (index) {var filename = req.files ["file" + index]. path.basename (req.files ["fichier" + index] .path); // l'interface path peut spécifier le nom et le nom du fichier du fichier. fs.crerareAdStream (req.files ["fichier" + index] .path) .pipe (fs.CreateWRiteStream (ciblePath));}});} uploadTest.uploadFile = uploadFile; exports.uploadTest = uploadTest;Les nodejs sont toujours très simples et puissants, et très créatifs, c'est pourquoi je l'aime. Nous voyons qu'il y a en fait très peu de codes clés ici. Je présenterai brièvement le processus logique d'implémentation de téléchargement de fichiers:
• Obtenez le nom du fichier du fichier téléchargé
• Définissez l'emplacement du stockage du fichier et le nom du fichier
• Lisez le flux de contenu du fichier et créez un nouveau fichier pour écrire le flux de contenu
Afin de télécharger plusieurs fichiers, j'ai également fait des opérations de correspondance, qui sont très intuitives et pas difficiles à comprendre.
Une fois le fichier téléchargé avec succès, il apparaîtra sous le fichier uploadFiles sous le fichier public.
Les modules utilisés dans le fichier sont enregistrés dans package.json. Ils peuvent être installés via la commande "NPM Install" en entrant l'adresse du répertoire du niveau simultané de package.json. Si vous exécutez directement les fichiers du projet sur GitHub, vous n'avez plus besoin de les installer.
Ce qui précède est la méthode d'implémentation pour combiner NodeJS et HTML5 pour télécharger plusieurs fichiers sur le serveur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!