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 相关文章推荐
Nodejs进程管理模块forever详解
Jun 01 NodeJs
提高NodeJS中SSL服务的性能
Jul 15 NodeJs
基于NodeJS的前后端分离的思考与实践(五)多终端适配
Sep 26 NodeJs
nodejs中实现路由功能
Dec 29 NodeJs
Nodejs获取网络数据并生成Excel表格
Mar 31 NodeJs
Nodejs从有门道无门菜鸟起飞必看教程
Jul 20 NodeJs
nodejs进阶(6)—连接MySQL数据库示例
Jan 07 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
详解nodejs异步I/O和事件循环
Jun 07 NodeJs
详解nodejs通过代理(proxy)发送http请求(request)
Sep 22 NodeJs
nodejs基于express实现文件上传的方法
Mar 19 NodeJs
Nodejs实现微信分账的示例代码
Jan 19 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之sprintf函数用法详解
2014/11/12 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
javascript的函数
2007/01/31 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
python学习之编写查询ip程序
2016/02/27 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
聊聊python中的异常嵌套
2020/09/01 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
交通事故协议书
2014/04/15 职场文书
禁烟标语大全
2014/06/11 职场文书
图书馆标语
2014/06/19 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
小数乘法教学反思
2016/02/22 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
windows server2008 开启端口的实现方法
2022/06/25 Servers
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL