傳統(tǒng)的文件上傳的Form submit的方式，會(huì)導(dǎo)致頁(yè)面的刷新，并且這樣的文件傳輸方式不是異步傳輸?shù)哪Ｊ?。大部分的所謂的異步傳輸文件的插件，都在使用iframe的方式，悄悄嵌入頁(yè)面，還是以傳統(tǒng)的form submit的方式上傳文件。

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

前臺(tái)傳輸使用了XMLHttpRequest對(duì)象的方式以及Jquery Ajax()

后臺(tái)使用了NodeJs配合formidable

方案1

Jade：

html
  head
    title= title
    script(src="/Lib/jquery/jquery-2.2.3.min.js")
     //引用sweetAlert庫(kù)
    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的新元素

前臺(tái)JS：

function UpladFile() {
    var fileObj = document.getElementById("file").files[0]; // js 獲取文件對(duì)象
    var FileController = "/file/fileUpload";                    // 接收上傳文件的后臺(tái)地址 
    // FormData 對(duì)象
    var form = new FormData();
    form.append("author", "zding");                        // 可以增加表單數(shù)據(jù)
    form.append("file", fileObj);                           // 文件對(duì)象 
    // XMLHttpRequest 對(duì)象
    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對(duì)象，使用append方式，將要上傳的數(shù)據(jù)放到此對(duì)象中去，當(dāng)然，我們要上傳的文件也一并放在了這個(gè)對(duì)象中。

接下來(lái)，我們創(chuàng)建需要用來(lái)傳輸?shù)腦MLHttpRequest對(duì)象。將其與服務(wù)器交互的url和方式通過(guò)open方法進(jìn)行確定，然后將onload事件(上傳成功)和progress(傳輸進(jìn)度)事件進(jìn)行綁定。

最后使用send方法，向后臺(tái)提起真正的請(qǐng)求。

后臺(tái)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";  //設(shè)置編碼
        form.uploadDir = 'public' + UPLOAD_FOLDER; //設(shè)置上傳目錄
        form.keepExtensions = true;  //保留后綴
        form.maxFieldsSize = 1024 * 1024 * 1024;   //文件大小         
        //設(shè)置文件后綴名
        form.parse(req,function(err,fields,files){
            if(!err){
                //獲取文件原始名稱
                var uploadFileName = files.file.name
                console.log("Fields:"+files);
                // //設(shè)置文件存儲(chǔ)全路徑
                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) {
            //計(jì)算文件上傳的進(jìn)度
            var percent = Math.round(bytesReceived/bytesExpected * 100); 
            console.log("Upload Percentage is:"+req.session.uploadPercent);
            global.percent = percent;
        });  

效果

方案2

Jade文件同方案1

前臺(tái)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進(jìn)行上傳。

上傳的時(shí)候的ajax和傳統(tǒng)的jquery ajax類似，在此不多做贅述。

在邊上傳的過(guò)程中，進(jìn)行另外的異步ajax請(qǐng)求，去后臺(tái)獲取文件上傳的進(jìn)度。一旦，文件上傳完畢，即關(guān)閉定時(shí)器，停止另外的ajax請(qǐng)求即可。

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());
})

此處為了方便測(cè)試，使用了global，但是，實(shí)際過(guò)程中，不建議大家使用global變量。

以上就是動(dòng)力節(jié)點(diǎn)小編介紹的"AJAX上傳文件顯示進(jìn)度條"，希望對(duì)大家有幫助，想了解更多可查看AJAX教程。動(dòng)力節(jié)點(diǎn)在線學(xué)習(xí)教程，針對(duì)沒(méi)有任何Java基礎(chǔ)的讀者學(xué)習(xí),讓你從入門到精通,主要介紹了一些Java基礎(chǔ)的核心知識(shí)，讓同學(xué)們更好更方便的學(xué)習(xí)和了解Java編程，感興趣的同學(xué)可以關(guān)注一下。