小伙伴们好！今天我来教你们做一个超简单的Node项目，让你们轻轻松松学会怎么让多个文件一次性拖拽上传。首先，去Github上找到这个项目并下载下来，下载后就可以直接在WebStorm里运行啦～但千万别忘了，如果找不到node.exe的话，需要自己设置一下路径。
EventUtil接口对象
uploadFile #a1{width:100px;height:100px;background: #aaaaaa;text-align:center;line-height:100px;color:rgba(81, 49, 202, 0.72); margin:150px auto;}拖拽到此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)
"; 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);
这个活儿里面，我做出来个叫EventUtil的超级工具。它就是处理各种浏览器绑定问题的利器。用EventUtil，的确省心多了，感觉比以前顺利好多。就瞅瞅那代码，简直就是小菜一碟！
FormData的使用
说到这事，上传文件不就好比往箱子里放东西！所以咱们选了FormData来当这个箱子呀。看那个append()方法，可以轻轻松松把文件扔进去。到时候传到服务器上，文件就能变成属性对象，是不是很神奇？
获取事件中的文件
跟你说搞定它就靠一招：”event.dataTransfer.files”。这样子，就可以把事件中的文件全给捞出来，又快又好使
jquery的ajax方法配置
来告诉你个小窍门儿，在用jQueryajax上传文件的时候，别忘了把processData设成false！要是像平常那样，不管什么数据只要是对象肯定都会被转成字符串。不过，如果你不想要这个功能的话，那就把它关掉。
文件上传成功后的反馈
搞定上传后，直觉告诉你文件稳了没问题，“{info:”success”}”这个提示直接出现在控制台上。这个小窍门还挺实用的？
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'));
});
app.js的修改
新的App.js改革了它现在就在fileUpload.js里，而且还有一个小工具fileUpload.js。里面的那个fileUpload测试神器可以派上用场了！终于到了我们最期待的环节——上传文件功能——uploadFile！
实现文件上传的逻辑过程
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;
好，这儿的核心代码已经足够少！下面让我讲讲怎么做到文件上传这回事。首先，我们要看清楚package.json里都要用到哪些模块，然后执行“npminstall”帮咱们全都搞定。若是直接从网上下载的工程文件，那就不用操心了，已经装好了。
总结与提问
搞定，我给你讲讲怎么用NodeJS和HTML5把好几张图片同时传到服务器上去~希望对你有所帮助哟。有问题尽管问我，我会尽快回答的！说到这我都想知道，这种往服务器传新文件的技巧，咱们平时能用到吗？快来评论区说说看，别忘了点个赞，顺便分享给朋友们。
评论0