结合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 ' hearteta charset=' UTF-8 ' script src=' http : js/jquery . js '/script script src=' http : js/eventutil . js '/scripttitleuploadFile/title style # a1 { width :100 px；高度：100 px；背景技术# aaaaaa文本对齐：居中；线高：100 px；color:rgba(81，49，202，0.72)；margin:150px汽车；}/style/head dydiv 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，lenEventUtil.preventDefault(事件)；//阻塞事件的默认行为是var formData=new formData()；if(event . type==' drop '){ files=event . datatransfer . files；I=0；len=files.lengthwhile(I len){ info=file[I]。名为“(”的文件[i]。键入'，'文件[i]。大小'字节)br/'；formData.append('file' i，files[I])；我；} output.innerHTML=info$.ajax({type:'post '，url:'/uploadFile '，data:formData，async: false，cache: false，contentType: false，processData: false，//在此指定不执行上传数据的默认字符串读取操作。成功：功能(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 html内容非常简单，一个显示允许的拖放范围，一个div块用于显示上传的文件内容。

部分Js:

这里我准备了一个Eventul接口对象，也可以看作是一个处理事件的小库。它的功能是封装不同浏览器绑定相同事件的不同方法。为了实现不同浏览器的通用事件绑定方法，使用Eventul对象统一实现。您可以简单地查看它的实现代码，这非常简单。

当浏览器检测到拖动的三个事件时，默认的“dragenter”、“dragover”和“drag”行为将被阻止，当它是“drag”时，我们的自定义事件将被执行。

因为我们上传文件，所以这里使用了FormData的一个实例，通过append()将文件添加到这个对象中，成为队列文件，上传到服务器后会按照队列顺序解析成属性对象。存储在事件中的文件通过“event.dataTransfer.files”获得。

这里需要注意的另一点是，jquery的ajax方法在上传文件对象时需要将processData配置为false，这意味着不使用读取字符串的默认操作。原因是默认情况下，如果通过data选项传入的数据是一个对象(从技术上讲，只要它不是字符串)，就会被处理并转换为查询字符串，以匹配默认的内容类型‘application/x-www-form-URL encoded’。如果您想发送DOM树信息或其他不想转换的信息，则需要将其设置为false。

文件上传成功后，控制台将打印消息“{ infor : ' success }”。

至此，前端结束。让我们看看Node.js端的代码。

文件结构如下：

我们先来看看route ——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 environmentsapp.set('port '，process . env . port | | 3000)；app.set('view engine '，' jade ')；app . use(express . fav icon())；app . use(express . logger(' dev '))；app . use(express . JSON())；app . use(express . URL encoded())；app . use(express . method override())；app . use(app . router)；app . use(express . static(path . join(_ _ dirname)))；exports.app=appvar uploadAction=require('。/Action/file upload’)；//路由事件侦听uploadaction . uploadtest . uploadfile()；//文件上传监控//仅当(' development '==app . get(' env '){ app . use(express . error handler()))时才进行开发；}app.get('/users '，user . list)；http.createServer(app)。listen(app.get('port ')，function(){ console . log(' Express server侦听端口' app . get(' port ')))；});和原来的app.js有些区别我在fileUpload.js中导出了app对象进行重用，然后引入了fileUpload.js模块，通过接口对象得到了保存了模块所有方法的uploadTest对象，并调用了uploadFile方法。

好了，最后，让我们看看fileUpload.js文件：

var multipart=require(' connect-多方')；var App=require('./app ')；var path=require(' path ')；var fs=require(' fs ')；var app=App.appvar uploadTest={ }；函数uploadFile(){ app . post('/uploadFile '，multipart())，函数(req，RES){ var I=0；而(我！=null){ if(req . files[' file ' I])upLoad(I)；else { i=nullRES . JSON({ infor : ' success ' })；返回；} I；}//上传队列文件函数upload(index){ var filename=req . files[' file ' index]。原始文件名| | path . basename(req . files[' file ' index]。路径)；//path接口可以指定文件的路径和文件名。“\的结尾默认为路径，字符串的结尾默认为文件名“var target path=path . dirname(“”)”/public/upload files/”filename；//fs用指定的路径创建一个文件，并将读取的文件内容写入fs . createreadstream(req . files [' file ' index)。路径)。管道(fs . create write stream(target path))；}});} uploadtest . uploadFile=uploadFile；exports.uploadTest=uploadTestNodeJs总是非常简单和强大，并且有很高的创造力，这也是我喜欢它的原因。我们看到这里的键码其实很少。我简单介绍一下实现文件上传的逻辑流程：

获取上载文件的文件名

设置文件存储位置和文件名

读取文件的内容流，并创建一个新文件写入内容流

为了上传多个文件，我还做了一些匹配操作，直观易懂。

文件上传成功后，会出现在公共文件下的上传文件下。

文件中使用的模块记录在package.json中，通过“npm install”指令输入package.json的同级目录地址即可安装。如果直接运行从github下载的工程文件，就不需要安装了。

以上就是边肖介绍的拖拽多个文件上传到服务器的实现方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！