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 npm install全局安装和本地安装的区别
Jun 05 NodeJs
nodejs开发环境配置与使用
Nov 17 NodeJs
Nodejs实现多人同时在线移动鼠标的小游戏分享
Dec 06 NodeJs
Nodejs基于LRU算法实现的缓存处理操作示例
Mar 17 NodeJs
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
May 13 NodeJs
NodeJS 实现手机短信验证模块阿里大于功能
Jun 19 NodeJs
Windows下使用Nodejs运行js的方法
Sep 02 NodeJs
nodejs微信扫码支付功能实现
Feb 17 NodeJs
NodeJS 中Stream 的基本使用
Jul 30 NodeJs
webpack打包nodejs项目的方法
Sep 26 NodeJs
nodejs 使用 js 模块的方法实例详解
Dec 04 NodeJs
nodejs制作小爬虫功能示例
Feb 24 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数据采集的详解
2013/06/02 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
Python发送手机动态验证码代码实例
2020/02/28 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
电子商务应届生求职信
2013/11/16 职场文书
电子商务个人自荐信
2013/12/12 职场文书
禁烟标语大全
2014/06/11 职场文书
公务员检讨书
2014/11/01 职场文书
酒店辞职书范文
2015/02/26 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python