位置: 编程技术 - 正文
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法(h5 nodejs)
编辑：rootadmin推荐整理分享NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法(h5 nodejs)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:nodejs与html交互,node.js与php,nodejs和html,node.js html,h5 nodejs,nodejs和html,nodejs和html,node.js与javascript,内容如对您有帮助，希望把文章链接给更多的朋友！
实现多文件拖拽上传的简易Node项目，可以在github上下载，你可以先下载下来： 运行该项目，通过app.js启动项目,如果提示找不到node.exe执行环境，请指定好你的node.exe安装位置。这里我用的express框架是3..2版本。
我们来简单介绍下拖拽效果是怎么实现的。
这里先看代码：
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里的内容：
和初始的app.js有几点不同，我把app对象导出来以便在fileUpload.js中重复利用，然后引入了fileUpload.js模块，并通过该接口对象获得保存该模块所有方法的uploadTest对象并调用uploadFile方法。
好，最后我们来看fileUpload.js文件：
nodeJs总是非常简便威猛的，而且具有高度的可创性，这也是我喜欢它的理由。我们看到这里的关键代码其实很少，我简单介绍下实现文件上传的逻辑过程：
&#;获取上传文件的文件名
&#;设置文件的存储位置，以及文件名称
&#;读取文件的内容流并创建新文件写入内容流
为了实现上传多个文件，我还做了一些匹配操作，很直观，不难理解。
文件上传成功后，会出现在public文件下的uploadFiles文件下。
文件中所用到的模块都记录在package.json中，可以通过进入package.json的同级目录地址通过指令”npm install“安装。如果是直接运行github上下载的工程文件，就不用再安装了。
以上所述是小编给大家介绍的NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！
nodejs如何获取时间戳与时间差 Nodejs中获取时间戳的方法有很多种，例如：1.newDate().getTime()2.Date.now()3.process.uptime()4.process.hrtime()平时想获取一个时间戳的话，用这些方法都可以,那么这
浅析Node.js实现HTTP文件下载 前言HTTP实现文件下载时，只要在服务器设置好相关响应头，并使用二进制传输文件数据即可，而客户端(浏览器)会根据响应头接收文件数据。而在Node.js
angularJS 如何读写缓冲的方法(推荐) 写在前面1.在客户端、服务端架构中，HTTP协议是主流通信技术；2.HTTP协议的无状态特性，节省带宽，较少服务器的负载，缓冲技术具有重要的运用；这
标签: h5 nodejs
本文链接地址:https://www.jiuchutong.com/biancheng/370761.html 转载请保留说明！
