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

实现多文件拖拽上传的简易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端的代码。

文件结构如下：

我们先看路由——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相结合实现拖拽多个文件上传到服务器的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Ajax上传实现根据服务器端返回数据进行js处理的方法

    本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法.分享给大家供大家参考.具体如下: Ajax上传说白了还是使用form表单提交,在当前页面加一个iframe,将提交的内容跳转到iframe中,造成一种页面无刷新的错觉. 以前也做过上传,基本是是使用commons-fileupload组件,基本的步骤是使用servlet处理完上传之后,使用PrintWrite的对象实例输出显示内容,可以是直接输出内容,也可以是输出script进行操作如 复制代码 代码如下: response.

  • java基于servlet编写上传下载功能 类似文件服务器

    java基于servlet编写上传下载功能 类似文件服务器

    本人闲来无事,写了个servlet,实现上传下载功能.启动服务后,可以在一个局域网内当一个小小的文件服务器. 一.准备工作 下载两个jar包: commons-fileupload-1.3.1.jar commons-io-2.2.jar 二.创建一个web工程 我的工程名叫:z-upload 三.配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="ht

  • 利用nodejs监控文件变化并使用sftp上传到服务器

    利用nodejs监控文件变化并使用sftp上传到服务器

    最近在用react+express做一个自己的工具型网站(其实就是夺宝岛抢拍器) 然后因为经常要改动,而且又要放到服务器上进行测试.总是要webpack,然后手动把文件上传上去,不胜其烦,索性搜索了下,直接写个能检测文件变化并自动进行上传的脚本好了. 首先,我们使用npm 安装两个别人封装好的模块. npm install ssh2-sftp-client npm install gaze 第一个模块的作用是sftp上传文件, 第二个模块的作用就是监听文件变化了.当然,你也可以采用node自带f

  • 基于HTML5+js+Java实现单文件文件上传到服务器功能

    上传单文件到服务器       应公司要求,在HTML5页面上实现上传文件到服务器,对于一个还没毕业的实习生菜鸟来说,这可不得了-----不会,网上各种百度,找各种博客还是没解决,最后还是请教了公司的大神,人家给卸了一个例子,然后根据人家写的终于把这个上传文件搞定. 好了,开始上代码. HTML5代码: <form name="upform" action="" method="POST"> <input type ="

  • Java通过FTP服务器上传下载文件的方法

    对于使用文件进行交换数据的应用来说,使用FTP 服务器是一个很不错的解决方案. 关于FileZilla Server服务器的详细搭建配置过程,详情请见FileZilla Server安装配置教程.之前有朋友说,上传大文件(几百M以上的文件)到FTP服务器时会重现无法重命名的问题,但本人亲测上传2G的文件到FileZilla Server都没有该问题,朋友们可以放心使用该代码. FavFTPUtil.Java package com.favccxx.favsoft.util; import jav

  • java实现将文件上传到ftp服务器的方法

    本文实例讲述了java实现将文件上传到ftp服务器的方法.分享给大家供大家参考,具体如下: 工具类: package com.fz.common.util; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; imp

  • 轻松创建nodejs服务器（10）：处理上传图片

    轻松创建nodejs服务器（10）：处理上传图片

    本节我们将实现,用户上传图片,并将该图片在浏览器中显示出来. 这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable模块.它对解析上传的文件数据做了很好的抽象. 要安装这个外部模块,需在cmd下执行命令: 复制代码 代码如下: npm install formidable 如果输出类似的信息就代表安装成功了: 复制代码 代码如下: npm info build Success: formidable@1.0.14 安装成功后我们用request将其引入

  • JAVA技术实现上传下载文件到FTP服务器(完整)

    具体详细介绍请看下文: 在使用文件进行交互数据的应用来说,使用FTP服务器是一个很好的选择.本文使用Apache Jakarta Commons Net(commons-net-3.3.jar) 基于FileZilla Server服务器实现FTP服务器上文件的上传/下载/删除等操作. 关于FileZilla Server服务器的详细搭建配置过程,详情请见 FileZilla Server安装配置教程 .之前有朋友说,上传大文件(几百M以上的文件)到FTP服务器时会重现无法重命名的问题,但本人亲

  • Java实现ftp上传下载、删除文件及在ftp服务器上传文件夹的方法

    一个JAVA 实现FTP功能的代码,包括了服务器的设置模块,并包括有上传文件至FTP的通用方法.下载文件的通用方法以及删除文件.在ftp服务器上传文件夹.检测文件夹是否存在等,里面的有些代码对编写JAVA文件上传或许有参考价值,Java FTP主文件代码: package ftpDemo; import java.io.DataOutputStream; import java.io.InputStream; import java.io.OutputStream; import sun.net

  • Java实现图片上传到服务器并把上传的图片读取出来

    在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢? 下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的不太清楚) 实现的思路: 工具:MySQL,eclipse 首先,在MySQL中创建了两个表,一个t_user表,用来存放用户名,密码等个人信息, 一个t_touxiang表,用来存放上传的图片在服务器中的存放路径,以及图片名字和用户ID, T_touxiang表中的用户ID对应了t_user中的i

随机推荐