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老是很是簡便威猛的，並且具備高度的可創性，這也是我喜歡它的理由。咱們看到這裏的關鍵代碼其實不多，我簡單介紹下實現文件上傳的邏輯過程：