傳統的文件上傳的Form submit的方式，會導致頁面的刷新，并且這樣的文件傳輸方式不是異步傳輸的模式。大部分的所謂的異步傳輸文件的插件，都在使用iframe的方式，悄悄嵌入頁面，還是以傳統的form submit的方式上傳文件。

本文中，使用了HTML5中的FromData傳輸表單。

前臺傳輸使用了XMLHttpRequest對象的方式以及Jquery Ajax()

后臺使用了NodeJs配合formidable

方案1

Jade：

html
  head
    title= title
    script(src="/Lib/jquery/jquery-2.2.3.min.js")
     //引用sweetAlert庫
    script(src="/Lib/sweetAlert/sweetalert.min.js")
    link(rel='stylesheet', href='/Lib/sweetAlert/sweetAlert.css')
  body
    div NetGapFileUpload
    progress#progressBar(value="0" max="100")
    span#percentage
    input(type="file" id="file" name="file")
    input( type="button" onclick="UpladFile()" value="上傳") 
    <script src="/Js/netGapFile.js"></script>

以上代碼很好理解，就不再贅述，其中progress也是HTML5的新元素

前臺JS：

function UpladFile() {
    var fileObj = document.getElementById("file").files[0]; // js 獲取文件對象
    var FileController = "/file/fileUpload";                    // 接收上傳文件的后臺地址 
    // FormData 對象
    var form = new FormData();
    form.append("author", "zding");                        // 可以增加表單數據
    form.append("file", fileObj);                           // 文件對象 
    // XMLHttpRequest 對象
    var xhr = new XMLHttpRequest();
    xhr.open("post", FileController, true);
    xhr.onload = function (returndata) {
        swal("done",returndata.target.responseText,"success");
    };
    xhr.upload.addEventListener("progress", progressFunction, false);
    xhr.send(form);
}
function progressFunction(evt) {
    var progressBar = document.getElementById("progressBar");
    var percentageDiv = document.getElementById("percentage");
    if (evt.lengthComputable) {
        progressBar.max = evt.total;
        progressBar.value = evt.loaded;
        percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
    }
}

首先，先建立HTML5中的FormData對象，使用append方式，將要上傳的數據放到此對象中去，當然，我們要上傳的文件也一并放在了這個對象中。

接下來，我們創建需要用來傳輸的XMLHttpRequest對象。將其與服務器交互的url和方式通過open方法進行確定，然后將onload事件(上傳成功)和progress(傳輸進度)事件進行綁定。

最后使用send方法，向后臺提起真正的請求。

后臺NodeJS

var formidable = require('formidable');
var fs = require('fs');
var path = require('path');
var util = require('util'); 
var UPLOAD_FOLDER = "/Newupload/" 
exports.fileUpload = function(req,res){
        console.log("fileUpload Used");     
        var form = new formidable.IncomingForm();
        form.encoding = "utf-8";  //設置編碼
        form.uploadDir = 'public' + UPLOAD_FOLDER; //設置上傳目錄
        form.keepExtensions = true;  //保留后綴
        form.maxFieldsSize = 1024 * 1024 * 1024;   //文件大小         
        //設置文件后綴名
        form.parse(req,function(err,fields,files){
            if(!err){
                //獲取文件原始名稱
                var uploadFileName = files.file.name
                console.log("Fields:"+files);
                // //設置文件存儲全路徑
                var fullPath = form.uploadDir + uploadFileName;
                console.log("Full Path is:"+fullPath);
                fs.renameSync(files.file.path, fullPath);  //重命名 
                console.log("Finaly, File Upload to"+fullPath); 
                res.end("filedUploaded");    
            }else{
               res.end("Error"+err);     
            }
        })
        form.on('progress', function (bytesReceived, bytesExpected) {
            //計算文件上傳的進度
            var percent = Math.round(bytesReceived/bytesExpected * 100); 
            console.log("Upload Percentage is:"+req.session.uploadPercent);
            global.percent = percent;
        });  

效果

方案2

Jade文件同方案1

前臺JS文件

function UpladFile() {  
    var formData = new FormData($("#uploadForm")[0]);  
    $.ajax({  
        url: '/file/fileUpload',  
        type: 'POST',  
        data: formData,  
        async: true,  
        cache: false,  
        contentType: false,  
        processData: false, 
        success: function (returndata) {
            swal("done",returndata,"success"); 
        },//success
        error: function (returndata) {   
            alert(returndata);  
        },
    }) 
    var timer = setInterval(function(){
            $.ajax({
                    url: '/file/getPercent',
                    type: 'GET',
                    success: function(percent){
                        console.log("Percent="+percent);
                        $("#percent").text(percent);
                        if(percent == "100"){
                            clearInterval(timer);
                        }
                    },
                    error: function(){
                        clearInterval(timer);
                        console.log("Percent Error");
                    }
            })
    },100);
}

此種方案，使用jquery ajax()的方式，配合HTML5的FomData進行上傳。

上傳的時候的ajax和傳統的jquery ajax類似，在此不多做贅述。

在邊上傳的過程中，進行另外的異步ajax請求，去后臺獲取文件上傳的進度。一旦，文件上傳完畢，即關閉定時器，停止另外的ajax請求即可。

NodeJs /file/fileUpload與方案一一致

NodeJs /file/getPercent

router.get('/getPercent',function(req, res, next) {
    //上傳文件
    console.log("Router getPercent");
    var percent = global.percent;
    res.send(percent.toString());
})

此處為了方便測試，使用了global，但是，實際過程中，不建議大家使用global變量。

以上就是動力節點小編介紹的"AJAX上傳文件顯示進度條"，希望對大家有幫助，想了解更多可查看AJAX教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。