NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法


Posted in NodeJs onJuly 26, 2016

实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/。

解开下载下的zip格式包,建议用webstom 运行该项目,通过app.js启动项目,如果提示找不到node.exe执行环境,请指定好你的node.exe安装位置。这里我用的express框架是3.21.2版本。

我们来简单介绍下拖拽效果是怎么实现的。

这里先看代码:

<!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: #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>

html内容很简单,一个显示允许的拖拽范围,一个用来显示上传文件内容的div块。

Js部分:

这里我准备了一个EventUtil接口对象,你也可以把它看成处理事件的很小的库,它的作用是封装了各个浏览器绑定相同事件的不同方法,为了实现各浏览器通用的事件绑定方法,统一用EventUtil对象来实现,你可以简单看下它的实现代码,非常简单。

当浏览器检测到拖拽的三种事件情况,“dragenter”,“dragover”,“drag"默认的行为会被阻止,当为”drag“情况时执行我们的自定义事件。

因为我们上传的是文件,所以这里用到了FormData的实例,通过append()添加文件到该对象中成为队列文件,上传到服务器端后会按队列顺序被解析成属性对象。事件中通过”event.dataTransfer.files“来获取事件中存储的文件。

这里还有一点需要注意的是jquery的ajax方法在上传文件对象时需要配置processData为false,意指不使用默认的读取字符串的操作。原因是默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,需要设置为 false。

文件上传成功后控制台会打印”{infor:"success”}“信息。

到此,前端部分结束,下面我们来看Node.js端的代码。

文件结构如下:

NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

我们先看路由——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'));
});

和初始的app.js有几点不同,我把app对象导出来以便在fileUpload.js中重复利用,然后引入了fileUpload.js模块,并通过该接口对象获得保存该模块所有方法的uploadTest对象并调用uploadFile方法。

好,最后我们来看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总是非常简便威猛的,而且具有高度的可创性,这也是我喜欢它的理由。我们看到这里的关键代码其实很少,我简单介绍下实现文件上传的逻辑过程:

•获取上传文件的文件名

•设置文件的存储位置,以及文件名称

•读取文件的内容流并创建新文件写入内容流

为了实现上传多个文件,我还做了一些匹配操作,很直观,不难理解。

文件上传成功后,会出现在public文件下的uploadFiles文件下。

文件中所用到的模块都记录在package.json中,可以通过进入package.json的同级目录地址通过指令”npm install“安装。如果是直接运行github上下载的工程文件,就不用再安装了。

以上所述是小编给大家介绍的NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

NodeJs 相关文章推荐
golang、python、php、c++、c、java、Nodejs性能对比
Mar 12 NodeJs
Nodejs学习笔记之NET模块
Jan 13 NodeJs
NodeJs中的VM模块详解
May 06 NodeJs
Nodejs的express使用教程
Nov 23 NodeJs
Nodejs中的this详解
Mar 26 NodeJs
详解nodejs微信公众号开发——4.自动回复各种消息
Apr 11 NodeJs
配置nodejs环境的方法
May 13 NodeJs
详解nodejs的express如何自动生成项目框架
Jul 12 NodeJs
详解NODEJS基于FFMPEG视频推流测试
Nov 17 NodeJs
nodejs中Express与Koa2对比分析
Feb 06 NodeJs
nodejs读取图片返回给浏览器显示
Jul 25 NodeJs
Nodejs从有门道无门菜鸟起飞必看教程
Jul 20 #NodeJs
nodejs加密Crypto的实例代码
Jul 07 #NodeJs
Nodejs中 npm常用命令详解
Jul 04 #NodeJs
Nodejs全局安装和本地安装的不同之处
Jul 04 #NodeJs
NodeJs——入门必看攻略
Jun 27 #NodeJs
浅析Nodejs npm常用命令
Jun 14 #NodeJs
nodejs 的 session 简单使用
Jun 06 #NodeJs
You might like
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
asp.net和php的区别点总结
2019/10/10 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python实现排序算法解析
2018/09/08 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
银行求职自荐信范文
2015/03/04 职场文书
中秋节寄语2015
2015/03/24 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
话题作文之生命的旋律
2019/12/17 职场文书