interface Web
Tutoriel H5
Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur
Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur
Un projet Node simple qui implémente le téléchargement par glisser-déposer de plusieurs fichiers peut être téléchargé depuis github. Vous pouvez d'abord le télécharger : https://github.com/Johnharvy/upLoadFiles/.
Décompressez le package au format zip téléchargé. Il est recommandé d'utiliser webstom pour exécuter le projet et de démarrer le projet via app.js. S'il indique que l'environnement d'exécution node.exe est introuvable, veuillez. spécifiez l'emplacement d'installation de votre nœud.exe. Le framework express que j'utilise ici est la version 3.21.2.
Présentons brièvement comment l'effet de traînée est obtenu.
Regardons d'abord le code :
<!DOCTYPE html>
<html>
<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: #aaaaaa;text-align:center;line-height:100px;color:rgba(81, 49, 202, 0.72);
margin:150px auto;}
</style>
</head>
<body>
<div id="a1">拖拽到此</div>
<div id="out-input"></div>
<script>
var a1=document.getElementById("a1");
function handleEvent(event){
var info ="",
output= document.getElementById("out-input"),
files,i,len;
EventUtil.preventDefault(event); //阻止事件的默认行为
var formData =new FormData();
if(event.type == "drop"){
files=event.dataTransfer.files;
i = 0;
len= files.length;
while( i< len){
info += files[i].name +"("+ files[i].type + "," +files[i].size +"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, //此处指定对上传数据不做默认的读取字符串的操作
success:function(rs){
console.log(rs);
},
error:function(r){
alert("文件上传出错！");
}
});
}
}
EventUtil.addHandler(a1, "dragenter", handleEvent);
EventUtil.addHandler(a1, "dragover", handleEvent);
EventUtil.addHandler(a1, "drop", handleEvent);
</script>
</body>
</html> Le contenu html est très simple, l'un montre la plage de déplacement autorisée et l'autre est un bloc div utilisé pour afficher le contenu du fichier téléchargé.
Partie Js :
Ici, j'ai préparé un objet d'interface EventUtil. Vous pouvez également le considérer comme une petite bibliothèque de traitement d'événements. Sa fonction est d'encapsuler différents. les méthodes de liaison du même événement dans différents navigateurs sont affichées. Afin d'implémenter la méthode de liaison d'événement commune à tous les navigateurs, l'objet EventUtil est utilisé pour l'implémenter de manière uniforme. Vous pouvez simplement jeter un œil à son code d'implémentation. .
Lorsque le navigateur détecte les trois conditions d'événement de glisser, les comportements par défaut de "dragenter", "dragover" et "drag" seront bloqués. Lorsqu'il s'agit de la condition "drag", notre coutume. événements.
Parce que nous téléchargeons des fichiers, une instance de FormData est utilisée ici. Les fichiers sont ajoutés à l'objet via append() pour devenir un fichier de file d'attente. Après le téléchargement sur le serveur, il sera analysé. ordre de la file d’attente. Objet Propriétés. Dans l'événement, "event.dataTransfer.files" est utilisé pour obtenir les fichiers stockés dans l'événement.
Une autre chose à noter ici est que la méthode ajax de jquery doit configurer processData sur false lors du téléchargement d'objets fichier, ce qui signifie que l'opération par défaut de lecture des chaînes n'est pas utilisée. La raison en est que par défaut, les données transmises via l'option data, s'il s'agit d'un objet (techniquement parlant, tant qu'il ne s'agit pas d'une chaîne), seront traitées et converties 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 l'arborescence DOM ou d'autres informations que vous ne souhaitez pas convertir, vous devez les définir sur false.
Une fois le fichier téléchargé avec succès, la console imprimera les informations "{infor:"success"}".
C'est la fin de la partie front-end. Regardons le code côté Node.js.
La structure du fichier est la suivante :
Regardons d'abord le routage - le contenu dans app.js :
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('view engine', '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=require("./Action/fileUpload");
//路由事件监听
uploadAction.uploadTest.uploadFile();
//文件上传监听
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});Il y a quelques différences par rapport au app.js initial. J'ai exporté l'objet app pour le réutiliser dans fileUpload.js, puis j'ai introduit le module fileUpload.js et j'ai obtenu l'objet uploadTest qui enregistre toutes les méthodes du module via l'interface. objet et l’a appelé la méthode uploadFile.
D'accord, regardons enfin le fichier fileUpload.js :
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["file"+i]) upLoad(i);
else{ i= null; res.json({infor:"success"});return;}
i++;
}
//上传队列文件
function upLoad(index){
var filename = req.files["file"+index].originalFilename || path.basename(req.files["file"+index].path);
//path接口可以指定文件的路径和文件名称，"\结尾默认为路径，字符串结尾默认为文件名"
var targetPath = path.dirname("") + '/public/uploadFiles/' + filename;
//fs创建指定路径的文件并将读取到的文件内容写入
fs.createReadStream(req.files["file"+index].path).pipe(fs.createWriteStream(targetPath));
}
});
}
uploadTest.uploadFile=uploadFile;
exports.uploadTest=uploadTest;nodeJs est toujours très simple et puissant, et c'est pourquoi je. j'aime ça. Nous voyons qu'il y a en fait très peu de codes clés ici. Permettez-moi de vous présenter brièvement le processus logique de mise en œuvre du téléchargement de fichier :
•Obtenir le nom du fichier téléchargé
•Définir le fichier L'emplacement de stockage et le nom du fichier
• Lire le flux de contenu du fichier et créer un nouveau fichier pour écrire le flux de contenu
Dans afin de pouvoir télécharger plusieurs fichiers, je fais également Certaines opérations de correspondance sont effectuées, 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 les fichiers publics.
Les modules utilisés dans le fichier sont enregistrés dans package.json et peuvent être installés en entrant l'adresse du répertoire de même niveau de package.json et en utilisant la commande "npm install". Si vous exécutez directement le fichier de projet téléchargé depuis github, il n'est pas nécessaire de l'installer.
Ce qui précède est la méthode d'implémentation introduite par l'éditeur pour combiner NodeJS et HTML5 pour glisser et déposer plusieurs fichiers à télécharger sur le serveur. J'espère que cela vous sera utile si vous avez des questions. , laissez-moi un message et je vous répondrai à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !
Pour plus d'articles sur la méthode d'implémentation consistant à combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur, veuillez faire attention au site Web PHP chinois !
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles?
Mar 13, 2025 pm 08:00 PM
L'article discute de l'utilisation de balises Meta pour contrôler la mise à l'échelle des pages sur les appareils mobiles, en se concentrant sur des paramètres tels que la largeur et l'échelle initiale pour une réactivité et des performances optimales. COMMANDE: 159
Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation?
Mar 18, 2025 pm 02:16 PM
L'article traite de la gestion de la confidentialité de l'emplacement des utilisateurs et des autorisations à l'aide de l'API Geolocation, mettant l'accent sur les meilleures pratiques pour demander des autorisations, assurer la sécurité des données et se conformer aux lois sur la confidentialité.
Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible?
Mar 13, 2025 pm 07:51 PM
L'article discute de l'utilisation de l'API de visibilité de la page HTML5 pour détecter la visibilité de la page, améliorer l'expérience utilisateur et optimiser l'utilisation des ressources. Les aspects clés comprennent la pause des supports, la réduction de la charge du processeur et la gestion de l'analyse en fonction des changements de visibilité.
Comment utiliser l'API HTML5 glisser-déposer pour les interfaces utilisateur interactives?
Mar 18, 2025 pm 02:17 PM
L'article explique comment utiliser l'API HTML5 Drag and Drop pour créer des interfaces utilisateur interactives, détaillant les étapes pour rendre les éléments dragables, gérer les événements clés et améliorer l'expérience utilisateur avec des commentaires personnalisés. Il discute également des pièges communs à un
Comment exécuter le projet H5
Apr 06, 2025 pm 12:21 PM
L'exécution du projet H5 nécessite les étapes suivantes: Installation des outils nécessaires tels que le serveur Web, Node.js, les outils de développement, etc. Créez un environnement de développement, créez des dossiers de projet, initialisez les projets et écrivez du code. Démarrez le serveur de développement et exécutez la commande à l'aide de la ligne de commande. Aperçu du projet dans votre navigateur et entrez l'URL du serveur de développement. Publier des projets, optimiser le code, déployer des projets et configurer la configuration du serveur Web.
Comment utiliser l'API HTML5 WebSockets pour la communication bidirectionnelle entre le client et le serveur?
Mar 12, 2025 pm 03:20 PM
Cet article explique l'API HTML5 WebSockets pour la communication client-serveur bidirectionnelle en temps réel. Il détaille les implémentations côté client (JavaScript) et côté serveur (Python / Flask), résolvant des défis tels que l'évolutivité, la gestion de l'état, un
La production de pages H5 nécessite-t-elle une maintenance continue?
Apr 05, 2025 pm 11:27 PM
La page H5 doit être maintenue en continu, en raison de facteurs tels que les vulnérabilités du code, la compatibilité des navigateurs, l'optimisation des performances, les mises à jour de sécurité et les améliorations de l'expérience utilisateur. Des méthodes de maintenance efficaces comprennent l'établissement d'un système de test complet, à l'aide d'outils de contrôle de version, de surveiller régulièrement les performances de la page, de collecter les commentaires des utilisateurs et de formuler des plans de maintenance.
Quels scénarios d'application conviennent à la production de pages H5
Apr 05, 2025 pm 11:36 PM
H5 (HTML5) convient aux applications légères, telles que les pages de campagne de marketing, les pages d'affichage des produits et les micro-Websites de promotion d'entreprise. Ses avantages résident dans la plateformité multi-plateaux et une riche interactivité, mais ses limites résident dans des interactions et des animations complexes, un accès aux ressources locales et des capacités hors ligne.
