Ajax文件上传，显示进度条

传统的文件上传的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方法，向后台提起真正的请求。

以上的传输方式使用了XMLHttpRequest对象，其具体的介绍可以参看：
http://www.w3school.com.cn/xmldom/dom_http.asp
http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

后台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变量。