保存到桌面加入收藏设为首页
java开发
当前位置:首页 > java开发

Html5+NodeJS拖拽多个文件上传到服务器-安度博客

时间:2019-02-04 14:53:00   作者:   来源:   阅读:90   评论:0
内容摘要: 实现多文件拖拽上传的浅易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/。 解开下载下的zip名堂包,建议用webstom 运行该项目,通过app.js启动项目如果提示找不到no......
  •       实现多文件拖拽上传的浅易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/。

          解开下载下的zip名堂包,建议用webstom 运行该项目,通过app.js启动项目如果提示找不到node.exe执行情况,请指定好你的node.exe安装位置。这里我用的express框架是3.21.2版本。

          我们来简朴先容下拖拽效果是怎么实现的。

            这里先看代码: 

    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <script src=&#39;js/jquery.js&#39;></script> <script src=&#39;js/EventUtil.js&#39;></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=&#39;a1&#39;>拖拽到此</div><div id=&#39;out-input&#39;></div><script> var a1=document.getElementById(&#39;a1&#39;); function handleEvent(event){ var info =&#39;&#39; output= document.getElementById(&#39;out-input&#39;) filesilen; EventUtil.preventDefault(event); //阻止事件的默认行为 var formData =new FormData(); if(event.type == &#39;drop&#39;){ files=event.dataTransfer.files; i = 0; len= files.length; while( i< len){ info += files[i].name +&#39;(&#39;+ files[i].type + &#39;&#39; +files[i].size +&#39;bytes)<br/>&#39;; formData.append(&#39;file&#39;+ifiles[i]); i++; } output.innerHTML = info; $.ajax({ type:&#39;post&#39; url:&#39;/uploadFile&#39; data:formData async: false cache: false contentType: false processData: false //此处指定对上传数据不做默认的读取字符串的操作 success:function(rs){ console.log(rs); } error:function(r){ alert(&#39;文件上传堕落!&#39;); } }); } } EventUtil.addHandler(a1 &#39;dragenter&#39; handleEvent); EventUtil.addHandler(a1 &#39;dragover&#39; handleEvent); EventUtil.addHandler(a1 &#39;drop&#39; handleEvent);</script></body></html>

       html内容很简朴,一个显示允许的拖拽规模,一个用来显示上传文件内容的div块。

           Js部门:

           这里我准备了一个EventUtil接口工具,你也可以把它看成处置惩罚事件的很小的库,它的作用是封装了各个nk" target="_blank">浏览器绑定相同事件的差异要领,为了实现各nk" target="_blank">浏览器通用的事件绑定要领,统一用EventUtil工具来实现,你可以简朴看下它的实现代码,很是简朴。

           当浏览器检测到拖拽的三种事件情况,“dragenter”,“dragover”,“drag&#39;默认的行为会被阻止,当为”drag“情况时执行我们的自界说事件。

           因为我们上传的是文件,所以这里用到了FormData的实例,通过append()添加文件到该工具中成为行列文件,上传到服务器端后会按行列顺序被剖析成属性工具。事件中通过”event.dataTransfer.files“来获取事件中存储的文件。

           这里尚有一点需要注意的是jquery的ajax要领在上传文件工具时需要配置processData为false意指不使用默认的读取字符串的操作。原因是默认情况下,通过data选项通报进来的数据,如果是一个工具(技术上讲只要不是字符串),都市处置惩罚转化成一个查询字符串,以配合默认内容类型 &#39;application/x-www-form-urlencoded&#39;。如果要发送 DOM 树信息或其它不希望转换的信息,需要设置为 false。

            文件上传乐成后控制台会打印”{infor:&#39;success”}“信息。

           到此,前端部门竣事,下面我们来看Node.js端的代码。

           文件结构如下:

           

          我们先看路由——app.js里的内容:

    var express = require(&#39;express&#39;);var routes = require(&#39;./routes&#39;);var user = require(&#39;./routes/user&#39;);var http = require(&#39;http&#39;);var path = require(&#39;path&#39;);var app = express();// all environmentsapp.set(&#39;port&#39; process.env.PORT || 3000);app.set(&#39;view engine&#39; &#39;jade&#39;);app.use(express.favicon());app.use(express.logger(&#39;dev&#39;));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(&#39;./Action/fileUpload&#39;);//路由事件监听uploadAction.uploadTest.uploadFile();//文件上传监听// development onlyif (&#39;development&#39; == app.get(&#39;env&#39;)) { app.use(express.errorHandler());}app.get(&#39;/users&#39; user.list);http.createServer(app).listen(app.get(&#39;port&#39;) function(){ console.log(&#39;Express server listening on port &#39; + app.get(&#39;port&#39;));});

      和初始的app.js有几点差异,我把app工具导出来以便在fileUpload.js中重复使用,然后引入了fileUpload.js模块,并通过该接口工具获得生存该模块所有要领的uploadTest工具并调用uploadFile要领。

         好,最后我们来看fileUpload.js文件:

    var multipart = require(&#39;connect-multiparty&#39;);var App=require(&#39;../app&#39;);var path = require(&#39;path&#39;);var fs=require(&#39;fs&#39;);var app=App.app;var uploadTest={};function uploadFile(){ app.post(&#39;/uploadFile&#39; multipart()function(reqres) { var i=0; while(i != null){ if(req.files[&#39;file&#39;+i]) upLoad(i); else{ i= null; res.json({infor:&#39;success&#39;});return;} i++; } //上传行列文件 function upLoad(index){ var filename = req.files[&#39;file&#39;+index].originalFilename || path.basename(req.files[&#39;file&#39;+index].path); //path接口可以指定文件的路径和文件名称,&#39;末了默认为路径,字符串末了默认为文件名&#39; var targetPath = path.dirname(&#39;&#39;) + &#39;/public/uploadFiles/&#39; + filename; //fs建设指定路径的文件并将读取到的文件内容写入 fs.createReadStream(req.files[&#39;file&#39;+index].path).pipe(fs.createWriteStream(targetPath)); } });}uploadTest.uploadFile=uploadFile;exports.uploadTest=uploadTest;

      nodeJs总是很是轻便威猛的,而且具有高度的可创性,这也是我喜欢它的理由。我们看到这里的要害代码其实很少,我简朴先容下实现文件上传的逻辑历程:

    获取上传文件的文件名 设置文件的存储位置,以及文件名称 读取文件的内容流并建设新文件写入内容流

         为了实现上传多个文件,我还做了一些匹配操作,很直观,不难明确。

         文件上传乐成后,会泛起在public文件下的uploadFiles文件下。

         文件中所用到的模块都纪录在package.json中,可以通过进入package.json的同级目录地址通过指令”npm install“安装。如果是直接运行github上下载的工程文件,就不用再安装了。

        如果你有任何问题,可以给我留言,我会实时回覆。


最近更新

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)