Html5+NodeJS——拖拽多个文件上传到服务器

时间 2019-11-09

标签 html5+nodejs html nodejs 多个文件上传服务器栏目 HTML 繁體版

原文原文链接

实现多文件拖拽上传的简易Node项目，能够在github上下载，你能够先下载下来：https://github.com/Johnharvy/upLoadFiles/。javascript

解开下载下的zip格式包，建议用webstom 运行该项目，经过app.js启动项目,若是提示找不到node.exe执行环境，请指定好你的node.exe安装位置。这里我用的express框架是3.21.2版本。html

咱们来简单介绍下拖拽效果是怎么实现的。

这里先看代码：前端

<!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块。java

Js部分：

这里我准备了一个EventUtil接口对象，你也能够把它当作处理事件的很小的库，它的做用是封装了各个浏览器绑定相同事件的不一样方法，为了实现各浏览器通用的事件绑定方法，统一用EventUtil对象来实现，你能够简单看下它的实现代码，很是简单。node

当浏览器检测到拖拽的三种事件状况，“dragenter”，“dragover”，“drag"默认的行为会被阻止，当为”drag“状况时执行咱们的自定义事件。jquery

由于咱们上传的是文件，因此这里用到了FormData的实例，经过append()添加文件到该对象中成为队列文件，上传到服务器端后会按队列顺序被解析成属性对象。事件中经过”event.dataTransfer.files“来获取事件中存储的文件。git

这里还有一点须要注意的是jquery的ajax方法在上传文件对象时须要配置processData为false,意指不使用默认的读取字符串的操做。缘由是默认状况下，经过data选项传递进来的数据，若是是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。若是要发送 DOM 树信息或其它不但愿转换的信息，须要设置为 false。github

文件上传成功后控制台会打印”{infor:"success”}“信息。web

到此，前端部分结束，下面咱们来看Node.js端的代码。

文件结构以下：ajax

咱们先看路由——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上下载的工程文件，就不用再安装了。

若是你有任何问题，能够给我留言，我会及时回答。