Maison >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
- 高洛峰original
- 2017-01-12 16:51:401843parcourir
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 !
Articles Liés
Voir plus- Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
- Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
- Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
- Expressions régulières et nouveaux éléments HTML5
- Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur